双十一大屏css技术总结——3D翻牌效果

1 前言

本文是讲解如何使用css实现3D翻牌效果。

以下是双十一大屏中用到的3D翻牌。

2 实现

2.1 第一步：场景

我们场景是3D，因此首先设置transform-style属性。

transform-style:preserve-3d;

2.2 第二步：翻转

从上图中我们可以明显看到的是一个翻转效果。

翻转效果如何实现呢？

这里肯定要用到的是transform，对吧。

好，赶紧看看transform都包涵哪些。

3D transform常用的transform-function的功能:

• translate3d()：移元素元素，用来指定一个3D变形移动位移量
• translate()：指定3Ｄ位移在Ｚ轴的位移量。
• scale3d()：用来缩放一个元素。
• scaleZ():指定Z轴的缩放向量。
• rotate3d()：指定元素具有一个三维旋转的角度。
• rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
• perspective()：指定一个透视投影矩阵。
• matrix3d()：定义矩阵变形。

经过查看，我们发现，应该用rotateX()，因为动画中我们是绕X轴旋转180度。