深入理解 CSS变形 transform(3d)

坐标轴

在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

<!-- 在本身元素上设置透视无效果 -->
<div style="float:left;margin-right: 10px;border:2px solid gray;">
    <div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div>

<!-- 在父级元素上设置透视有效果 -->
<div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">
    <div style="width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div>
</div>

perspective-origin

　　值: x轴 y轴

　　初始值: 50% 50%

　　应用于: 非inline元素(包括block、inline-block、table、table-cell等)

x轴
    left: 0% center: 50% right: 100%
y轴
    top: 0% center: 50% bottom: 100%

矩阵matrix3d

　　3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言，3d矩阵matrix3d却有12个参数。其变形规则与2dmatrix()类似，只不过是从3*3矩阵，变成了4*4矩阵

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

 

3d位移

　　3d位移函数主要包括traslateZ()和translate3d()

translate3d(x,y,z)

　　[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

3d缩放

　　3d缩放函数主要包括scaleZ()和scale3d()

scale3d(x,y,z)

　　默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放

scaleZ(z)相当于scale3d(1,1,z)

　　[注意]3d位移函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

　　[注意]scaleZ()和scale3d()单独使用时没有任何效果

.box1 .in{
    transform: translateZ(-500px);
}
.box2 .in{
    transform: translateZ(-100px);
}
.box3 .in{
    transform: scaleZ(5) translateZ(-100px);
}

//下图中从左到右分别是box1,box2,box3。由此得知，box3也相当于向z轴移动了-500px

　　所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的

3d旋转

　　3d旋转函数主要包括rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(x,y,z,Ndeg)

　　x、y、z分别用来描述围绕x、y、z轴旋转的矢量值。最终变形元素沿着由(0,0,0)和(x,y,z)这两个点构成的直线为轴，进行旋转。当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转

　　[注意]safari浏览器不支持keyframes中改变rotate3d()

rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)

背景可见

　　元素的背面默认是可见的。但有时需要让元素背面不可见，这就要用到属性backface-visibility

backface-visibility: 设置元素背面是否可见

visible:可见，默认
hidden:不可见

变形风格

　　变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值，表示2d平面；而perserve-3d表示3d空间

　　[注意]当设置了overflow:非visible或clip:非auto时，transform-style:preserve-3d失效

transform-style: flat | preserve-3d