本文将详细描述了变换变形的3D内容，但它是基于变形的二维变换的理解。在三维变形性能主要的变换原点，变换，变换视角，透视风格，起源，背面的能见度
坐标轴
先了解你的角度，你必须首先了解坐标轴的三维变形和平面变形的最大区别是参考轴是不同的。二维变形坐标轴平面，只有X轴和Y轴，而三维变形坐标轴由三轴的三维空间，X，Y和Z轴正向，Y轴和Z轴向前面临的权利，分别为底部和屏幕。
观点
透视是变形三维的重要组成部分，如果不设置透视图，就无法实现单元的三维变形效果。
以下rotatex / /（）旋转功能，rotatex（45deg）表示元素在X轴方向轴沿顺时针方向旋转角度为45 /离开原有的风格和透视效果图设置变形和透视风格影响变形，变形设置但未设置透视风格的影响
可以从以上三个角度出发，如果不设置透视图，那么浏览器将3D元素向2D垂直变形操作投影到图像平面上，最后只呈现宽的高变化元素。
为了深入理解透视图，我们需要理解观察者、透视元素和变形元素的概念。
首先，变形元素，顾名思义，是transform3D变换元件，主要用于变换，变换原点，背面的可视性和其他属性的设置。
查看器是一个由浏览器模拟以观察透视元素的点。观察者给出一条与点光源相似的视线。
观察透视元素也是观察到的元素，根据不同设置的属性，它可能是变形元素本身，它也可能是元素的父或祖先（细节后面），主要是透视，透视原点属性集。
角度距离
透视距离透视是指观察者与平行于z轴的屏幕之间的距离，即视距。
价值：没有|
初始值：无
应用于：非内联元素（包括块、内联块、表、表单元格等）
继承：没有
{注意}透视图不应该是0和负数，因为观察者和屏幕之间的距离是0，或者当屏幕在背面时，透视元素的正面不能被观察到。
{透视图的透视图不是一个百分比，因为百分比需要一个相对的元素，但是Z轴没有一个相对的元素大小。
（1）一般来说，物体越远，它看起来就越小，它反映在透视属性上，即属性的值越大，元素的三维效果就越小。（靠近一个人，你甚至可以看到他的毛孔；如果你离一个人很远，你只能看到一个侧面）。
{ { 2 }设置透视透视属性的元素是透视元素。一般来说，此属性只能设置在变形元素的父级或祖先级。因为浏览器将生成其分段变形的透视图，因此它本身不会产生透视。
CSS代码将内容复制到剪贴板。
视角的起源
透视原点的起源是观察者的位置。一般来说，观察者位于与屏幕平行的另一个平面上，观察者总是垂直于屏幕，观察者的活动区域是观察到的元素的盒模型区域。
视角的起源
值：x轴Y轴
初始值：50% 50%
应用于：非内联元素（包括块、内联块、表、表单元格等）
继承：没有
X：左右中心| |轴| | Y轴：顶底|中心| | |
{ 1 }关键字
x轴左：0%个中心：50%右：100% Y轴顶部：0%中心：50%底部：100%
{ 2 }数值
x轴的值是x轴上0点的偏移量（在元素边界的左上角）；y轴的值是y轴上0点的偏移量。
{ 3 }百分比
x轴的百分比与透视单元的宽度（宽度+横向填充+横向边界）有关，y轴的百分比高于透视元件（高度+纵向填料+纵向边界）。
{ 4 }单个值
只有一个值时，第二个默认值为中心。
{注意}透视原点必须在设置透视图的元素上定义，也就是说它必须设置在元素的父元素或祖先元素上。
变形功能
在介绍了三维模型的基础上，详细介绍了变形三维变形函数和变形起源，最后详细描述了二维变形函数，三维变形函数与位移、旋转、缩放等相似，没有倾斜。
{倾斜倾斜（）是在三维空间中不能变形的二维变形，并且可以在x轴和y轴上倾斜，但不能在z轴上倾斜。
矩阵Matrix3d
位移、旋转和缩放的3D变形功能，通过设置不同的参数的矩阵实现。相比于二维矩阵矩阵的6个参数（），三维矩阵Matrix3d有12个参数，变形规律是相似的，2dmatrix（），但这仅仅是从3×3矩阵对4×4矩阵。
Matrix3d（A，B，C，D，E，F 0，，0，G，H，I，J，K，0，1）
三维位移
三维位移功能主要包括（）和（）translate3d traslatez
translate3d（x，y，z）
{ x和y可以是长度也可以是百分数。百分比是宽度和垂直方向相对于它的元素的水平方向的高度和宽度。z只能设置长度值。
TraslateZ（Z）相当于translate3d（0,0，Z）
{注}的WebKit translatez变换：（0）通常用于开启硬件加速
{注意}三维位移函数是等价的（1,0,0,0,0,1,0,0,0,0,1,0 Matrix3d X，Y，Z，1）。
3D扩展
3D变焦功能主要包括（）和（）scale3d scalez
scale3d（x，y，z）
默认值是scale3d（1,1,1），当参数为负，翻转和缩放第一
ScaleZ（Z）相当于scale3d（1,1，Z）
{注意}三维位移功能相当于Matrix3d（x，0,0,0,0，Y，Z，0,0,0,0，0,0,0,0,1）。
{说明} scalez（）和（）scale3d单独使用没有任何影响
CSS代码将内容复制到剪贴板。
在{。1。
变换：translatez（- 500px）；
}
在{。箱。
变换：translatez（- 100像素）；
}
在{。盒。
scalez变换：（5）translatez（- 100像素）；
}
/ /下方从左到右分别是1，箱，盒，盒，也相当于移动的500px于Z轴
所以scalez变换：（5）translatez（- 100像素）和变换：translatez（- 500px）是等价的
三维旋转
三维旋转功能主要包括rotatex（），rotatey（），（），（）rotate3d rotatez
rotate3d（X，Y，Z，Ndeg）
X，Y，和Z是用来描述矢量值绕X，Y，和Z轴，分别。最终变形元件沿两点（0,0,0）和旋转轴（X，Y，Z），当n为正，顺时针旋转时的元素；n是负的，元素是逆时针旋转。
rotatex（ndeg）相当于rotate3d（1,0,0，Ndeg）
RotateY（ndeg）相当于rotate3d（0,1,0，Ndeg）
RotateZ（ndeg）相当于rotate3d（0,0,1，Ndeg）
透视功能
透视属性、透视图将在上面详细描述，但是透视属性应用于变形元素的父级或祖先级，透视函数透视图（）是变形变形函数的属性值，它应用于变形元素本身。
{由于透视原点透视原点只能设置透视透视图属性的元素上设置。如果透视元素透视图（）设置为元素，透视原点不被使用，并且观察者使用默认位置，也就是说，在与元素中心点相对应的平面上。
角度（）
透视函数透视（）的参数只能是长度的值，长度值只能是正的。
{ }由于转换属性处于向后和向后的顺序，我们必须在其他变形函数之前写入透视（）函数，否则将不会产生透视效果。
变形的起源
当变形2d被描述为变形原点时，二维变形原点没有z轴，z轴的值为0，三维变形原点的z轴是一个可以设置的变量。
变换的起源
值：x轴的y轴z轴
初始值：50% 50%
应用于：非内联元素（包括块、内联块、表、表单元格等）
继承：没有
{说明} IE9浏览器不支持，safari3.1-8，android2.1-4.4.4，和ios3.2-8.4都需要加前缀，和其他更高的浏览器可以使用标准的写作
X：左中右| |轴| | Y轴：顶|中心|底| | Z轴：
对于x轴和y轴，可以分别设置键和百分比，相对于其自身元素的水平方向宽度和垂直高度，z只能设置长度值。
变形元件 / /默认风格变换：rotate3d（1,1,1,45deg）；
背景是可见的。
该元素后默认是可见的。但有时候你需要将该元素无形的后面，它使用属性背面能见度
背面的知名度：如果该元素是可见的是可见的
可见：可见，默认隐藏：不可见。
设置一个半透明元素包含两个绝对位置重叠的子元素，内容是A和B，表示前后元素。
{如果一个元素被另一个元素覆盖，那么它不仅覆盖前面，而且覆盖后面。
变形方式
变形变换风格允许变形元素及其子元素是在三维空间中呈现。变形风格的两值。平面是二维平面的默认值；和perserve-3d表示三维空间
{注}当溢出：不可见或夹：不是汽车，变换风格：preserve-3d失败
变换方式：平preserve-3d |
将本文深入分析CSS变形（3D）是萧边共享你的全部内容。我希望能给你一个参考，希望你能支持它。
