空间转换-3D-在空间中的位移、旋转、缩放

闲来无事来整理一下关于3D空间转换的位移，旋转，缩放。

3D空间位移

1、空间位移是指分别在X轴，Y轴、Z轴进行位移。
如果看成一个坐标系的话也是由位移的正负的
X轴:右移动为正方向
Y轴:下移动为正方向
Z轴：向外移动正方向。（Z轴位置与我们视线方向相同）
附图

2、
属性：transfrom
取值：translate（X,Y,Z`）

像素单位数值--translateX(50px) translateY(100px) translateZ(150px) 
百分比--transfrom：translate（50%，100%，150%``）
1-基本常用使用：transfrom：translate（50px，100px，150px``）
2-translateX(50px)
 translateY(100px) 
 translateZ(150px) 

2.1 复合属性
属性：transform
取值：translateX(50px) translateY(100px) translateZ(150px)
注意：
1、在我们使用以上代码进行位移运行时，Z轴的移动是看不到的，因为我们的电脑屏幕是2D的所以没法显示 出来，这时候我们为了看清楚效果，我们会给父级元素添加一个属性perspective:(取值在-800px~1000px）之间，这样我们就能看清楚Z轴的位移变化，近大远小。
近大：例如：translate（150px）时候，我们就能看到图片变大了，向我们靠近。同理可证远小亦然。
2、`perspective:(取值在800px~1000px）是指视距===人眼到屏幕的距离，在这个范围内人们看到的物体变化最好看-------如果你非要问为什么，我只能告诉你，是实验出来的，并且老祖宗说的。

空间旋转

属性：transfrom
取值：rotate(360deg)

1、`  div {
   
            /* 空间旋转 */
            transform: rotate3d(20deg, 30deg