效果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c54b6422a14b0ecb8a7512dfdff50de7.gif)
思路分析
首先是两张图片应该是叠在一起的,然后要让他旋转的时候展示另一张图片。
知识准备:
transform变形,定位,还有backface-visibility,这后面说什么用的。
1、先来搭建HTML结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/79a41200b5f274905107c8da5fe7c3cb.png)
需要两张图片,可以用自己喜欢的,结构也可以写的简单些。
2、然后再来写下基础样式
把父容器放在中间点的位置,方便看,这里说下perspective这个属性,视域,通俗来讲就是值越小,效果也扁平化,越大透视效果越强,也是取决于盒子大小而异,这就需要去调下值,到一个合适的位置。
3、再来就是如何让一个旋转时显示另一张图片了
这里就用到了backface-visib