transform 3D那些~

    以前在学css的时候只是稍微看了一遍transform 变换尤其是3D的，今天在做一个小demo的时候才重点研究了一些，所以整理了下来。

    一说3D估计大家最先想到的就是我们平常看到3D电影还有VR了，所为3D就是立体了，我们日常生活中使用的实物当然毋庸置疑的是3D的啦，举个与我们网页制作类似的例子，我们平常玩的游戏里的人物，便是3D的。先想想看，如果游戏里的人物都和纸片一样没有丝毫的立体感，那种垃圾游戏还会有人玩吗？所以在某些时候3D的效果可以使用户拥有更好使用体验，网页中也不例外。嘿嘿~下面说重点:

一、浏览器兼容问题

    transform 3D作为CSS3所增加的新特性，有浏览器兼容问题是毋庸置疑的啦，下面列举一下常用的几个浏览器第一个兼容的版本号

 根据CAN I USE?上显示:

•        IE: 10
•   Edge: 12
• Firefox: 10
• Chrome: 12
•    Safari: 4
•  Opera: 15

（在加上-webkit-, -ms- 或 -moz-前缀的前提下）

二、rotateX（）、rotateY（）、rotateZ（）旋转函数，单位（deg）

借张图：

如图这般，在三维的空间里存在这水平方向的X轴，竖直方向的Y轴，以及垂直于屏幕方向的Z轴。如果这么说还不理解的话，拿图说话：

当你把笔记本电脑盖子盖上的时候就是沿X轴旋转。

当你以目前这个视角看这本书时，这本书的开并就是沿Z轴方向旋转。

这个！就像在跳某舞一样就是在沿Y轴旋转。

我已经冒死把我兄弟的照片放出来了，还看不懂我也没办法了！！

三、scaleX()、scaleY（）、scaleZ（）缩放函数

参数为百分数或者小数。

例如：transform：scaleX（0.5）；// 为X轴方向变为原来的0.5倍

四、translateX（）、translateY（）、translateZ（） 平移函数

例如：translateX（100px）; // X轴正方向平移100px

五、transform-style 属性

这个属性乃完成3D的重中之重。它指定应用transform元素在空间中是呈现方式：

              flat：在2D平面呈现（其子元素）

preserve-3d：在3D空间呈现（其子元素）

六、perspective属性

多少了解些美术的应该会知道当我们画一个三维立体透视图时往往会取一个作为视线的集中点。图中S点，而perspective属性所要描绘的是元素与视图的距离，即图中AB、CD两道线距离粉色平面的距离(该平面可等效于我们的电脑屏幕）距离越近3D效果越好

有大神做了这个神器方便理解：点击打开链接

冒死盗了一张图啊

七、backface-visibility属性

这个属性就容易理解了，当我们面对一个人时我们转过身子它会看到什么？当然是我们背部啦~

而这个属性就是控制元素翻转后背面是否可见。

backface-visibility:hidden;// 即背面不可见

八、transform-origin 属性

此属性定义的就是你要进行变形的元素的原点啦，就是整个变形过程所围绕的中心点（不是元素的正中心啊！位置是自己设置的参数），

嘿嘿~偷个懒，我发现MDN上做的这个实例图贼形象就不献丑了，甩出链接MDN transform-origin属性

暂时悟到的就这些啦~