首页 > 代码库 > 深入理解 CSS变形 transform(3d)

深入理解 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

 

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