3D转换（重点）和浏览器私有前缀（附加...）

3D转换

3D：我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。
3D的特点：
（1）、近大远小；
（2）、物体后面遮挡不可见。
3D转换我们主要学习工作中最常用的3D位移和3D旋转
我们先大致了解一下主要知识点然后下面在详细的说一下，我们主要的知识点分4个分别是：.
（1）、3D位移：translate3d(x，y，z)
（2）、3D旋转：rotate3d(x，y，z)
（3）、透视：perspective
（4）、3D呈现：transfrom-style

一、三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
（1）、x轴：水平向右
注意：x右边是正值，左边是负值；
（2）、y轴：垂直向下
注意：y下面是正值，上面是负值；
（3）、z轴：垂直屏幕
注意：往外面是正值，往里面是负值。
话不多述上图感受一下：

二、3D移动（位移）translate3d

3D移动在2D移动的基础多加了一个可以移动的向，就是z轴方向。
它的用法：
1、translform:translateX(100px) ：仅仅是在x轴上移动；
2、translform:translateY(100px) ：仅仅是在Y轴上移动；
3、translform:translateZ(100px) ：仅仅是在Z轴上移动(注意：translateZ- 般用px单位 )；
4、transform:translate3d(x,y,z) ：其中x、y、Z分别指要移动的轴的方向的距离。

三、透视perspective

在2D平面产生近大远小视觉立体，但是只效果二维的
它的作用：
1、如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
2、模拟人类的视觉位置，可认为安排一只眼睛去看。
3、透视我们也称为视距：视距就是人的眼睛到屏幕的距离。
4、距离视觉点越近的在电脑平面成像越大，越远成像越小。
5、透视的单位是像素。
注意：透视写在被观察元素的父元素上面的。
我给大家上两张图片感受一下：


这里面d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，轴越大(正值)我们看到的物体就越大。

四、说一下 translateZ

translform:translateZ(100px)：仅仅是在轴上移动。
有了透视，就能看到translateZ引起的变化了
说一下它如何取值：
1、translateZ：近大远小
2、translateZ：往外是正值
3、translateZ：往里是负值

五、3D旋转rotate3d

3D旋转指的是：可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
它的语法为：
1、transform:rotateX(45deg)：着x轴正方向旋转45deg；
2、transform:rotateY(45deg)：沿着y轴正方向旋转45deg；
3、transform:rotateZ(45deg)：沿着Z轴正方向旋转45deg；
4、transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度(制作了解就可以了应用到的时候不多)。
看视频上有个左手准则给大家分享一下：
1、如何认准x轴的正负方向：
（1）、左手的手拇指指向 x轴的正方向
（2）、其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
附加一个照片：

2、如何认准y轴的正负方向：
（1）、左手的手拇指指向 y轴的正方向
（2）、其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
老样子来个图方便理解：

注意：温馨提示：做这个手势的时候别对着别人…最好别尝试试试就逝世啊，哈哈不说玩笑话了我们继续。
简单的了解一下transform:rotate3d(x,y,z,deg)：
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
来举两个"栗子"：
（1）、transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
（2）、transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转45deg

六、3D呈现transfrom-style

它的作用和取值：
1、控制子元素是否开启三维立体环境。
2、transform-style:flat元索不开启3d立体空间默认的
3、transform-style:preserve-3d；子元素开启立体空间
注意：
1、代码写给父级，但是影响的是子元素
2、这个属性很重要，后面必用…

七、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1、简单的来说一下它们的私有前缀：
（1）、-MOZ-：代表firefox浏览器私有属性；
（2）、-ms-：代表ie浏览器私有属性
（3）、-webkit-：代表safari、chrome 私有属性
（4）、-0-：代表Opera私有属性
2、再说一下它们的提倡的写法：
-moz-border-radius:：10px；
-webkit-border-radius：10px；
-o-border-radius：10px；
border-radius：10px；
在这里先简单提一下…

[^1]：好了这就是关于3D转换的和一些浏览器私有前缀的相关知识，希望对你有些帮助，最后呢还是要说让我们一起加油吧！