前言
说到2d与3d的转换，到底什么是2d，什么又是3d，看下图：
坐标
所谓的2d和3d就是我们理解的二维空间和三维空间，那么什么是二维空间，什么又是三维空间呢？
二维空间：二维空间就是一个平面，我们日常生活中所知道的二维坐标系，就是用来解读二维空间的，看图中有x，y，z三个轴，我们只需要看X轴和Y轴，而X轴和Y轴所构成的就叫做二维坐标系，而2d转换就是基于二位坐标系变换的
三维空间：三维空间是基于二维空间上又加了一条Z轴，我们所处的空间就是三维的空间，我们学到的3d转换，就是基于三维坐标系的
当我们弄懂了什么是2d什么又是3d的时候，我们想到什么是变，基于2d和3d又是怎样的变法；
一、2D形变：transform
2d形变共有4个属性：
translate（位移）
rotate（旋转）
scale（缩放）
skew（倾斜）
1.1 translate
在2D形变中，位移translate有两个参数，就是沿着x，y轴位移的距离。
.box{
transform:translate(100px,100px);
}
.box{
transform:translateX(100px);
}
.box{
transform:translateY(100px);
}
.box{
transform:translate(100px);
}
以上设置的四个样式，它们的表现形式分别是，第一个元素向右向下各移动100px，第二个元素向右移动100px，第三个元素向下移动了100px，第四个元素向右移动了100px，translate不指定方向的时候设置一个值只会对x轴生效；
1.2 rotate
在2D形变中，rotate有一个参数，就是旋转的角度，注意这里的旋转是顺时针的。
.box{
transform:rotate(45deg);
}
.box{
transform:rotate(-45deg);
}
上面的代码设置以后，第一个元素会顺时针旋转45度，第二个逆时针旋转45度；
1.3 scale
在2D形变中，scale有两个参数，就是沿着x，y轴缩放的比例，这个值小于1代表缩小。
.box{
transform:scaleX(2);
}
.box{
transform:scaleY(0.5);
}
.box{
transform:scale(1.5);
}
上面的代码表示，第一个元素沿着X轴的方向会放大两倍，也就是宽度放大两倍，第二个元素沿着Y轴放大0.5倍也就是高度缩小两倍，第三个元素整体放大1.5倍；
1.4 skew
这个属性是2d形变中的属性，所以只有两个参数，分别表示沿着x轴和y轴的2d倾斜角度；这个属性需要注意是，在倾斜的时候，元素里的文字也会跟着倾斜。
二、3D形变
3d.png
3d形变有三个属性：
translate
scale
rotate
是不是和2d形变差不多呢？是的，两者差别不大，但是3d多了很多2d没有的东西。
首先我们要知道几个概念：
景深：perspective:属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值<length>
接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>
值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。
比如你站在10英尺和1000英尺的地方看一个10英尺的立方体。在10英尺的地方，你距离立方体是一样的尺寸。因此视角转变远远大于站在1000英尺处的，立体尺寸是你距离立方体距离的百分之一。同样的思维适用perspective的<length>值;
这上面说的一堆不知道是不是人话，我理解的景深就是你的眼睛距离屏幕的大小；
transform-style：preserve-3d；属性是3D空间一个重要属性，表示所有子元素在3D空间中呈现。
视觉中心点：指的是我们的视野在一个平面中的中心点，在3d转换中，视觉中心点是可以控制的。
perspective-origin:center center;(默认值)
可以设置x方向和y方向，单位可以是px百分比 top center bottom right left
旋转中心点：
transform-origin:center center 0;(默认值)
前面我们写过xy方向上的，今天多了一个z轴，第三个值就是z轴默认值是0；
2.1 translate
3d中，位移多了一个方向，z轴的方向，translateZ（100px）表示元素向Z轴移动100px；
2.2rotate
在2d中旋转是只有绕着中心点旋转的，在3d中多了x轴和y轴，其中，箭头指向我们的顺时针是正的，逆时针是负的；
2.3scale
缩放也是在2d的基础上加了一个在z轴上缩放，这里主要声明一下z轴的缩放：
在z轴上的缩放，我理解的是，把z轴方向的空间密度改变了，如果同样是100px 在scaleZ（2）的基础上，100px同样是100px这个数据但是100px变大了。
网友评论