CSS3之3D轮播动画详解 css3d动画演示( 二 )



scroll是动画名称,可以自定义 。
6 。更立体:《transform-style:preserve-3d》可以化腐朽为神奇,只需在父元素中加入这个属性即可 。

CSS3之3D轮播动画详解 css3d动画演示


立体的
此时刷新页面会产生这样的效果:
CSS3之3D轮播动画详解 css3d动画演示


貌似和最终效果还有些偏差,这时我们只需要用“perspective”调整一下视角就可以了,给最外围盒子添加样式perspective:1000px;该属性用来调整视角的远近 。
CSS3之3D轮播动画详解 css3d动画演示


一般情况下,物体离视线越远,体积越小 。但是,如果一个规则的立体图形靠近我们的视线,每张脸的大小差异就很难看出来 。在CSS中,可以使用透视来调整视角的距离,也可以使用“透视-原点”来调整视角的位置 。感兴趣的白人可以试试 。
好了,你完了 。现在你可以刷新你的页面了!
免责声明:我也是小白 。本文仅供相互交流 。如有错误,请指正 。
,

推荐阅读