本文主要是介绍双十一大屏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():指定3D位移在Z轴的位移量。
- 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的@业枫同学(欢迎妹子骚扰?)写的。
其实,代码网上一大波,来来来,我给一个:http://codepen.io/whqet/pen/AfLvt 。
最后,今天周五,现在晚上十点了,我
这篇关于双十一大屏css技术总结——3D翻牌效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!