效果

话不多说，直接看成果：

是不是很酷！！！看它翻转真的很疗愈欸（什么怪癖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

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12520