特点：近大远小 遮挡不可见
三维坐标系： x轴----向右是正值 向左是负值； y轴----向下是正值，上面是负值； z轴----向屏幕外是正值，向里面是负值。
最常用到的功能是：3D位移和3D旋转
语法格式：
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
简写：transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
代码演示：
transform: translate3d(100px, 100px, 100px); /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */ transform: translate3d(100px, 100px, 0);*注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充；
简写中的3d的d不能大写，只能小写；
translateZ() 一般只使用px为单位，几乎不使用%百分比
translateZ() 与透视属性结合使用
translateZ() 值越大图像显示的越大，值越小图像显示的越小，当然，前提是透视perspective的值不变
语法：div{ perspective: npx;}
代码演示：
body { perspective: 1000px; }*注意：网页想要产生3D效果，必须要有透视（perspective）属性；
透视也称为视距，就是人的眼睛到屏幕的距离；
透视的值越小距离电脑屏幕越近，图像越大，越远图像越小；
透视值的单位是像素 px；
透视属性perspective 需要写到被观察元素的父盒子的样式里面，（最好写到它的父亲盒子里面，如果写到其他的祖先盒子里有可能会出现一些视觉错误，目前碰见过一次，还没搞明白具体原因）；
translateZ与 perspecitve 的区别：perspecitve 给父级进行设置，translateZ 给元素本身进行设置，不过两者的原理相同，都是近大远小。
语法格式：
transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z,deg) – 沿着自定义轴旋转 deg 为角度，x y z 的值可以是0~1之间 不过这条语句几乎不使用。
代码演示：
div { perspective: 300px; } img { display: block; margin: 100px auto; transition: all 1s; } /*X轴*/ img:hover { transform: rotateX(-45deg) } /*Y轴 img:hover { transform: rotateY(180deg) }*/ /* Z轴 img:hover { transform: rotateZ(180deg) }*/ /* 自定义轴(此时是以x轴 y轴的对角线为轴) img:hover { transform: rotate3d(1, 1, 0, 180deg) }*/*注意：3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转；
通过左手准则来判断绕轴旋转的正方向，左手拇指指向轴的正方向，其余四指弯曲的方向就是绕轴旋转的正方向，旋转角度值为正数，即正方向旋转，值为负数即为反方向旋转；
旋转角度的单位为----度 deg；
绕Z轴旋转的效果与2D旋转效果相同；
transform: rotate3d(x, y, z,deg)该属性几乎不使用，三轴旋转足以实现大部分效果；
进行旋转时必须先给父盒子设置透视属性，才能看出3D效果；
语法格式：
/*默认值，不开启子元素D效果*/ transform-style: flat; /*子元素开启3D立体空间效果*/ transform-style: preserve-3d;*注意：该属性用于控制嵌套的盒子中，当父元素开启3D效果时，子元素是否保持自身的3D效果；
该属性要写到父级元素中，但作用的对象是子元素；
