效果
话不多说，直接看成果：
是不是很酷！！！看它翻转真的很疗愈欸（什么怪癖XD）
制作方法
1. 架构
架构是一个外层的card里面包font 跟back的物件。
<div class='card'>
<div class='font'>Font</div>
<div class='back'>Back</div>
</div>2. rotateY
当hover 到card时，各自旋转Y 方向180 deg，不过因为要设定一开始back 在背面，所以先让它转-180 deg，hover 时再转回0 deg。
.back {
transform: rotateY(-180deg);
}
.card:hover .font {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0);
}
3. backface-visibility
在翻转时会发现可以从背面看到前面倒转的文字加背景，可以设定backface-visibilty: hidden，翻到背面时就看不到前面的东西啰！
.font,.back {
backface-visibility: hidden;
}4. position: absolute
要让两个卡片叠在一起，只要使用绝对定位，就可以让它叠在一起，记得在父层card设定position: relative才会定位在父层喔。
.card {
position: relative;
}
.font, .back {
position: absolute;
}5. perspective
好像可以翻转了，但是怎么不太立体的感觉？这时候就要使用perspective，可以想像有一台摄影机看着物件，后面接的数值就是跟它的相差的距离，距离越近，物件的Z 轴会被放的更大，而距离越大，会越接近平面的效果。
可以使用下面的范例玩玩看～～
参考：变形(transform) 3D基本使用
来自：https://www.tpisoftware.com/tpu/articleDetails/2988
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！