起因是我昨晚在MOOC上做CSS3的十天精通课程。里面的综合练习就是做一个3D导航翻转效果。非常高。以前，我对这些效果是很不屑的。我觉得这些特效的代码网上很多，复制粘贴就行了，速度也够快的。但是在实际工作中，自己写其实比网上找代码要快很多，因为不知道怎么找代码贴。然后你必须看看哪些代码需要使用，哪些不需要。而且自己写的话，漏掉了可以再查一下，显然要快一些。如果你熟练，你可以写得更快。很想自己写这些常见的特效，但是无奈。坐在电脑前，我开始怀疑自己前几章学的CSS3到底是个什么鬼，包括以前学的CSS3知识。我无法写出这种效果。我怎么能不屑这些特效呢？然后我参考了下面的答案，发现仅仅完成上面的CSS3基础题是无法完成这个练习的。也就是说，就像FCC的单项综合题一样，需要自己去查其他知识，自己去应用，才能完成。看了下，有很多兼容的前缀，还有几个不熟悉的属性：什么是透视？变换风格？保留3d？翻译Z？？就像一张黑色的问号脸。幸运的是，我认为我对CSS3非常熟悉。本以为只要会用transform的4个transformation和transitions就够了。.难怪7月初面试前端。当面试官问我CSS3知识的时候，我感觉我的回答是游走在CSS3的边缘。..那就去找吧。.之前张新旭的博客写的加载效果很好。既然是css高手，应该能找到点什么，但是当他搜索透视的时候，还真的找到了。并且提到了所有其他属性。然后。.本来打算做一个导航的3D翻转效果。看完文章很激动，做了一个3D轮播，效果还不错。..以前也觉得效果那么好，那么难。看完文章，发现难度可以接受。其实一直在犹豫要不要写一篇文章总结一下。大师已经写出这么有趣的好文章了。我再写一遍不是浪费时间吗？.现在怎么会有人写一篇关于特效的文章呢？.但我还是写了。.作为今天学习的总结也不错。另外，本文不会教您编写任何一种特定效果。如果喜欢大神的有趣讲解，可以点这里。本文废话不多说，直接开始。（“废话够多好吗！”）涉及到的知识点rotateXrotateYrotateZtranslateZtranslateZperspectivetransform-style:prserve-3drotateXrotateYrotateZ学别人写3D特效，首先得有3D概念！什么是3D，3D就是三维。是一个几何概念。虽然数学是我的弱项，空间思维也不强，但反复思考还是能看懂的。刚真，虽然师傅很形象的给rotateXrotateYrotateZ这三个属性分别举例了，但是我就是不懂rotateZ，好尴尬。.飞刀绝技，趴在床上少女的身边。..我还是不明白。..如果你能看懂，下面的可以跳过，直接进入下一个讲解。如果你和我一样一头雾水，可以看看下图。请无视我的画家。如果你还不明白，不要害怕，那就来听听我的故事吧。当时，我有点烦躁，怀疑自己的人生，看到桌上有一支笔。我终于明白，老天爷还是会可怜傻子的。横握笔，拿出食指圈，这是rotateX笔直握，拿出食指圈，这是rotateY最让我困惑的是rotateZ，其实你点笔对着自己（当然不需要对着自己指对面..），然后拿出食指，用同样的方法绕一圈。才明白飞镖和趴在旁边的妹子图的意思（哎哟，这智商。。。）透视属性3D变换第一个关键知识好像很难。Perspective就是望远镜，透视法。刚开始接触这个属性，觉得好深奥，太抽象了。再看demo，假设：背景色为白色的为父元素，背景色为黄色的为子元素。将父元素的视角设置为100，并将子元素设置为45度。正向翻转（45deg）效果如图：然后我增加了视角，改成300，效果如图：结论：视角值越小，3D效果越明显，即，您的眼睛离真正的3D越近。因此，透视可以理解为视线。translateZ属性现在我们假设视角是固定的，50px。我们来看看通过设置不同的translateZ来结合理解。html代码：css代码：作用：我们可以发现translateZ越大，元素离我们的眼睛越近。当它大于或等于透视时，它会从肉眼中消失。这里要注意透视的位置，也就是写法。1）写在stage元素（也就是父元素）：就是我们上面写的2）写在子元素：transform(perspective(50px),translateZ(30px))两种方式的区别写的是子元素是否以同一个A东西为参考，如果是的话，换视角的文章写的很用心，这里就省略了。简单但重要的transform-style属性很简单，你可以看到它的语法。.只有两个值。.变换风格：扁平|preserve-3d为什么重要，因为它的默认值是flat。这意味着该元素的所有子元素都没有3D效果。加什么透视或者很复杂很华丽的变换也没用。如果设置平面值，它们将全部变为2D。所有子元素只能以平面形式呈现在你面前，什么？你想看什么样的扁平化方法？好吧，那我就通过一个例子让大家知道这个transform-style属性有多强大。首先是轮播的原始效果。然后去掉transform-style:preserve-3d，以下图片可能会造成情绪困扰，请家长们一起观看。“哇！好丑啊！”所以这个属性，简单但重要。不要忘记添加它。PS：为了防止子元素溢出容器，不能将overflow值设置为hidden。如果设置overflow:hidden，子元素也会出现在同一平面上（与transform-style设置为flat的元素效果相同）。写到这里结束，3D变换常用的属性也说完了。属性少，难点在于抽象，理解起来需要一定的时间。其实还有一些属性没有提到，比如透视属性backface-visibility:hidden，设置为hidden是看不透的。这是我第一次一口气写出这么长的文章。其实一开始我是拒绝的。现在前端工程和各种前端开发框架盛行，我想现在学习CSS3知识的人已经不多了。但是很多人在简历上都说自己精通CSS3（当然我的简历上没有这么写）。即使遇到特效，没有在网上找代码，也大多是从自己整理的demo库中复制粘贴。（注意，写得不好，只是整理了一下），不过一天下来想想，从看文章理解，到自己写特效，再到总结知识点，整理3D变换套路。..折腾了这么久，后悔自己没有写点什么。虽然累了点，但也收获了很多。至少我不会再害怕3D变形了。我知道CSS3很深奥，3D变换也是。有很多陷阱需要解决。只在写特效的时候遇到过。突然把刚才写的东西给忘了，顺便写个总结吧。首先是视角，观看距离。此属性应写在父元素上，以设置用户与元素的3D空间之间的Z平面距离。观看距离视角越小，3D效果越明显，肉眼离Z屏越近。然后是translateZ，值越大越接近你的眼睛。当它超过透视设置的值时，它就会消失。它太大了，你看不到。最后就是在父元素的子元素中设置transform-style:preserve-3d，表示子元素需要使用3D空间。如果未设置，则3D变换将变成2D平面。参考感谢张新旭这篇文章：嗯，CSS33Dtransform变换，不过如此！还有一篇写得很好的文章可以帮助大家理解：Transform-style和Perspective属性最后引用张新旭的一句话：简单的从网上复制一些效果代码永远是复制的宿命！
