涉及到的知识点

rotateX rotateY rotateZ
translateZperspective
transform-style: prserve-3d

rotateX rotateY rotateZ

学别人写3D特效，首先你得要有3D概念啊！

何为3D，3D就是立体。是几何概念。

把笔竖起来拿着，拿出食指围绕它转圈，这就是rotateY

rotateZ，其实就是你把笔指向自己（当然你不指向自己指向对面也行。。），然后同样地拿出食指围绕它转圈。

好像很难的perspective属性

3D变换的第一个重点知识。

perspective即望远镜，透视的。

结合demo来看，假设：

背景色为白色的是父元素，背景色为黄色的是子元素
在父元素上设置perspective为100
对子元素设置45度正向翻转rotate(45deg)

效果如图：

然后把perspective调大，改成300，效果如图：

结论：
perspective取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。

因此，perspective你可以理解为视距。

translateZ属性

现在我们假设perspective是固定的，50px。

我们通过设置不同的translateZ，来看看结合着理解。

html代码：

css代码：

效果：

我们可以发现，translateZ越大，该元素离我们眼睛越近，当其大于等于perspective时，就会从肉眼消失。

这里要注意perspective所在位置，即书写方法。

1）写在舞台元素中(即父元素)：就是上面我们写的那种
2）写在子元素中：transform( perspective(50px), translateZ(30px))

两种写法区别在于子元素是否拿同一个东西作为参照物，是的话，改变perspective这个大神那篇文章写得很仔细了，这里就省略了。

简单却重要的transform-style属性

transform-style: flat | preserve-3d

为什么说重要，因为它默认值是flat。意味着该元素的所有子元素不具备3D效果，你加了什么perspective，加了很复杂很华丽的transform都没用，设置的是flat值，就全都得变2D，所有子元素都只能以平展形式呈现在眼前，什么？你想要看怎么个平展法？

好吧，那下面我就通过实例让你们知道这个transform-style属性的厉害。

首先是旋转木马原本效果。

然后去掉transform-style: preserve-3d，接下来的画面可能会引起情绪不安，请在家长陪同观看。

"哇！好丑！"

所以说这个属性，简单但很重要。不要忘加了。

PS：不能为了防止子元素溢出容器而设置overflow值为hidden啊，如果设置了overflow:hidden同样会导致子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）。

尾声

写到这里，3D变换常用的属性也说完了，属性很少，难就难在比较抽象，需要花点时间理解。其实还有些属性没有提到，例如透视属性backface-visibility:hidden，设置为hidden则无法看穿了。

然后就是translateZ，值越大，证明越靠近你的眼睛。当超过了perspective设置的值时就会消失，它只是太大，大到你看不见而已。

最后就是要在父元素的子元素中设置transform-style:preserve-3d，表明子元素需要用到3D空间，不设置的话如何3D变换也会变为2D平展。

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！