type
status
date
slug
summary
category
password
tags
icon
首先页面上准备好容器和前后两个page，设置好颜色
翻转的关键就在于，rotate函数，其中rotateY就是水平方向翻转，
初始状态是front面不变：
rotateY(0) back面是翻转180度状态：rotateY(180deg)
然后鼠标hover容器时，两个面同时翻转，需要给它们加上transition才看得到变化：
现在已经有效果了：
然后就是，将两个面重合，这个很简单，子绝父相：
但是现在发现翻过来还是绿色，这是因为翻过来front层级还是在back层级之上，这个时候我们可以使用属性
backface-visibility
这样，效果就完成99%了，最后1%是看着没有立体效果，我们可以给.container加上
perspective属性，然后去掉边框，这样就完全完成了：完整代码:
欢迎您在底部评论区留言，一起交流~
- 作者:NotionNext
- 链接:https://lsnx.top/article/css-symmetric-flip
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。