带厚度的图片3D旋转

2022-06-29

最近在做的项目需要商品展示的时候3D旋转,需要展示一张商品的正面图和带有logo的背图,3D旋转好做,关键是怎样将这两张图片连起来,即让图片看起来有厚度。

16564308139881656430855114

一时半会没想到解决办法,虽然我知道肯定会有办法的。

忽一日,我想到是不是可以在这两家图片放多个带有底色的dom,叠加出厚度来,就像我在photoshop里给作品做有厚度的阴影一样。

1656431496436

photoshop里复制多个图层做出有厚度的案例展示图


一试之下,果然可以。

1656431922889

这两张图片相距多少px就加多少个dom。当然这肯定不是最优解,平白无故的多出来这么多代码。

最后用js写一个循环,方便控制和修改。1656432088270

最终效果图如下:

6d644ab4fbc931b9e72089598ee8777


831b403f63b5872f22306c45f1c6205


附上代码,希望对有此类需求的朋友有所帮助。

1656432597a62871.rar