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

双十一大屏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度。

然后，我们YY一下，3D场景下，绕X轴旋转180度后应该是背面。像这样：

如果不好理解，可以看下面这个：

因此，我们进入到第三步。

2.3 第三步：隐藏

我们要让背面不可见。

backface-visibility: hidden;

为了方便理解，可以看这个：

这时你会说，我去，文字本身是平面的，不显示不是没有了么？那怎么办啊？

于是，我们来到第四步。

2.4 第四步：复制

由于这个文字本身是平面的，而场景是3D的，因此，我们需要利用两块来拼成一个整体。
html如下：

<li ><span class="list-item-front"><span>天猫双十一晚上火过春</span></span><span class="list-item-back"><span>天猫双十一晚上火过春</span></span>
</li>

当一个旋转180度显示背面时，设置背面隐藏，另一个则显示正面，如此轮换。

你以为这就完了吗？不，并没有。

2.5 第五步：视角

要知道，这可是3D啊，怎么能少了perspective这玩意儿。

perspective: 600px;

没有它，翻转的时候是这样的：

有了它，翻转的时候是这样的：

看出差别没？看出差别没？

什么，没看出来？ 那我请你看看大漠老师的这个：

好啦，到这里，我只想说：

然后，亲四不四想要源代码呀？请去下面的总结。

3 知识点

在这一篇中，主要涉及到了transform属性中的transform-style、backface-visibility和perspective。

3.1 transform-style

transform-style: flat | preserve-3d

flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

3.2 backface-visibility

backface-visibility: visible | hidden

visible为backface-visibility的默认值，表示反面可见。

2.3小结的图应该让人很了然啊～

3.3 perspective

perspective：none | <length>

对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。

几个大家都知道的小结论：
- perspective取值为none或不设置，就没有真3D空间。
- perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
- perspective的值无穷大，或值为0时与取值为none效果一样。

注意：perspective属性需要设置在父结点。

总结

其实，这个大屏的翻牌效果是我们AIS-UED的@业枫同学（欢迎妹子骚扰？）写的。
其实，代码网上一大波，来来来，我给一个： 。
最后，今天周五，现在晚上十点了，我