【专业技术】css 3D transform 感性理解

一、首先，情感化认识

CSS3中的3D变换效果，其实就是现实中姿势的变换；

虽然都是成年人，但考虑到仍有不少窝中待守的雏鸟，如果上面的解释想不过来，就想想以下这些：

1.下图的这些人在干嘛？跳水？NO, No, No!! 记住，他们不是在跳水，是在做3D变换！！！

2.下图可爱baby在干嘛？广播体操？NO, No, No!! 记住，他不是在做操，是在做3D变换！！！

3.来到2次元，下图这个妹子在这幅姿态称为：

卖萌？NO, No, No!! 记住，他不是在卖萌，是在做3D变换！！！

二、感性认识 rotate 属性；

rotate旋转的意思，rotateX旋转X轴,rotateY旋转Y轴，rotateZ旋转Z轴……

什么X轴/Y轴/Z轴，这几个词从我嘴里一出来，别说你们，我自己都晕了~~

赶快，从现实世界找对应东西理解（参照下面人的旋转）：

邹凯的体操单杠运动rotateX；

蔡依林姐姐的钢管舞是rotateY；

旋转飞刀的特技表演是rotateZ。

三、感性认识 必不可少的perspective属性

perspective的中文意思是：透视，视角！

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

我们初中学美术，或者学建筑的同学肯定接触过透视的一些东西：

不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！

四、translateZ更好理解透视

我们都知道近大远小的道理，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素为perspective201像素，如下：

perspective: 201px;

则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

五、感性理解perspective-origin

perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。比方说：

一图胜千言，屌丝男们这个应该都懂的。

以上就是部分css 3D transform 属性的感性理解， 可以更好的让我们玩转css 3D 让自己的网站更加酷炫；感谢阅读