相信学过数学的效果版对这一概念多多少少是知道的，我们要想有一个3D空间效果，也就是立体空间感，比如：正方体、长方体.....再比如我们生活所居住的房间也是3D立体空间的，主要有X轴、Y轴Z轴共同组成
x轴：水平向右，x右边是正值，左边是负值。
y轴：垂直向下，y下面是正值，上面是负值。
z轴：垂直屏幕，往外面是正值，往里面是负值。
transform-style设置元素的子元素是位于3D空间中还是平面中。
语法：
基于上述栗子，将transform-style属性值改为preserve-3d：
.box{/*让子元素保持3d立体空间环境*/transform-style:preserve-3d;}得到3D空间效果：
3D视觉是不是感觉一下就来啦~
perspective指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念
z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定
“perspective”本身就具有透视的意思，就是设置用于户和元素3D空间Z平面之间的距离（视距），简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小，值越小3D效果就越明显。
div{perspective：none|
body{perspective:900px;}或者
.box{perspective:900px;}只要设置在父盒子上就可以，效果如下：
从第一眼就可以看出与上面不同，没有设置景深是这样：
设置了景深是这样的：
注意：perspective属性只影响3D转换元素，并且同时使用perspective-origin属性，可以改变3D元素的底部位置
perspective-origin属性定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的底部位置。
perspective-origin:x-axisy-axis;x-position：指定消失点的横坐标，其值有以下形式：
y-position：指定消失点的纵坐标，其值有以下形式：
介绍完语法使用，我们知道了怎么取值，下面还是基于上述例子继续演示：
.box{perspective-origin:300px;}效果如下：
.box{perspective:900px;perspective-origin:left;}效果如下：
.box{perspective:900px;perspective-origin:300%;}效果如下：
.box{perspective:900px;perspective-origin:lefttop;}效果如下：
backface-visibility指定当元素背面朝向观察者时是否可见
元素的背面是其正面的镜像，虽然在2D中不可见，但是当变换导致元素在3D空间中旋转时，背面可以变得可见。（此属性对2D变换没有影响，它没有透视。）
backface-visibility:visible|hidden;这里借鉴了MDN上面的例子：
旋转单位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
3D位移在2D基础上多加了一个可以z轴移动的方向
3D位移主要演示translateZ和translate3d两个属性：
translate3d()CSS函数在3D空间内移动一个元素的位置，这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离
注意：
rotateX：让元素围绕X轴转
rotateY：让元素围绕Y轴旋转
rotateZ：让元素围绕Z轴旋转
rotate3d：让元素围绕固定轴旋转不变形
旋转量由角度决定，角度为正则顺时针旋转，反之逆时针旋转
Y轴旋转效果：
Z轴旋转效果：
这里单独将rotate3d函数拎出来讲
rotate3d(x,y,z,a)取值分析：
也就是说rotateX(a)===rotate3d(1,0,0,a)、rotateY(a)===rotate3d(0,1,0,a)、rotateZ(a)===rotate3d(0,0,1,a)
.box:hover{transform:rotate3d(1,1,0,50deg);/*表示在X轴和Y轴旋转50°*/}效果如下：
.box:hover{transform:rotate3d(1,1,1,1turn);/*围绕3轴旋转一圈*/}