CSS3之美(十三):3D变换

CSS3 全新的 2D/3D 变换模块,浑身散发着迷人的魅力。

CSS中的3D元素

CSS3 中的三维对象是基于笛卡尔坐标系统的,请移步至 维基百科:Cartesian coordinate system

在 CSS 中,z轴 是以旁观者为参照的,一般来说我们认为 x轴 在网页二维平面中是从左到右的,而 y轴 是从上到下的,那么就可以认为 z轴 是垂直网页二维平面的直线。当我们沿着 z轴 正方向移动一个元素时,就是把元素向自己的方向移动;同样地,以负值移动的话,就是让元素向远离我们的方向移动。

注意,在网页中,一般认为,在三维空间中定位的元素其参考坐标系的原点坐标 (0, 0, 0) 位于元素的几何中心。

比较 2D模块,从形式上来说,3D 模块的元素表现只不过是多了一条 z轴 而已,所以 2D模块中的所说的属性与函数在 3D模块中多是通用的,只不过相同的函数操作多了一个与 z轴 相关的函数而已,当然了,相应的简写形式也做了变化。另外,3D模块也新增了许多函数,帮助我们更好的控制元素在三维空间中变换。

transform-style属性

3D模块与 2D模块的在属性上的不同的第一个表现就是多了 transform-style 属性。如果一个元素被显式地设置了 transform-style 属性的值,那么就意味着这个 元素的子元素 在三维空间中被定位了。

其语法如下:

1
E { transform-style: keyword; }

transform-style 属性支持关键字值:

  • flat: 默认值,子元素不会应用其三维位置坐标
  • preserve-3d: 子元素会应用其三维位置坐标,只有显示地设置了这个值,3D 变换才会起作用。

transform-style 指定的值会影响到元素的子元素,而不是元素本身。有一个需要注意的地方:如果一个元素的 overflow 属性值是 hidden,它的子元素就无法以 3D形式显示。

变换原点

3D变换模块中,transform-origin 属性的语法如下:

1
E { transform-origin: x, y, z; }

前两个属性值,x 和 y,就像 2D变换模块中 transform-origin 属性所起的作用一样,它们可接受的值可以是一个关键字值(left right center 用于 x,而 top bottom center 用于 y)、长度单位或者百分比值。默认的值是 center center,即 50% 50%

第三个值,z,是一个长度值,设置了将发生的变换相距 z轴 的距离。

绕轴旋转

在 2D 变换中,我们只有一条可以围绕旋转的轴,所以 rotate() 函数只需要一个单独的值,但是当我们在三维中处理旋转的时候,有三条轴可以围绕着旋转。因此,也就有三个属性可以进行控制:

  • rotateX(angle): 元素绕 x 轴旋转 angle 度
  • rotateY(angle): 元素绕 y 轴旋转 angle 度
  • rotateZ(angle): 元素绕 z 轴旋转 angle 度

3D 变换还有一个 2D变换不拥有的旋转函数:

1
E { transform: rotate3d(x, y, z, 3d); }

上面代码的意思是说,将元素绕经过原点与点 (x, y, z)的直线旋转 angle 度。

沿轴平移

2D 变换中关于平移的函数有 translateX()translateY(),它们分别用于设定元素沿着 x轴 y轴 平移。

而在 3D变换中,由于多出了一条 z轴,所以也多了一个新函数 translateZ(),该函数用于设置元素绕 z轴 平移的距离。

另外,3D模块中支持简写函数 translate3d(translateX, translateY, translateZ)

缩放大小

同样地,3D模块中关于缩放的函数多了一个 scaleZ()。元素缩放的函数总共有三个:

  • scaleX()
  • scaleY()
  • scaleZ()

上述三者的简写形式为:

scale3d(scaleX, scaleY, scaleZ)

元素深度

3D 模块为 transform 属性提供的一个全新函数是 perspective(),它可以在我们查看 3D对象时生成一个人工观察点,提供了深度的错觉。我们先看一下它的语法:

1
E { transform: perspective(deepth); }

什么意思呢,前面说过在三维空间中定位的元素,其 z轴 是垂直于网页二维平面,且正方向指向我们的。这个函数就是用来模拟在 z轴 上的人工观察点的,也就是说,它的属性值是用于设置我们的观察点距离元素几何中心的垂直距离,感官上就像是元素的深度。

举个例子

1
2
3
div {
transform: rotateY(50deg) perspective(30px);
}

在上面的例子中,div 绕 y轴 旋转了 50度,然后函数设定了观察点是在 z轴 上坐标为 z=30px 的位置。一般来说,在一定范围内 perspective() 函数的参数值越大,我们从观察点看到的元素就显得越大,但是当超过了这一范围后,从观察点看到的元素大小就是其原始尺寸。只有将元素沿着 z轴 负方向移动,并且从较低的观察点去看,元素才可能比原始尺寸小。

perspectiveperspective-origin

perspective 属性与 transfomr 属性所支持的 perspective() 函数功能及语法均相同,二者区别在于:

  • perspective() 函数为元素设定了深度之后,在三维空间中效果会应用到所有它的子元素上
  • perspective 属性的效果则仅仅只是作用于元素本身。

perspective-origin 属性用于设置从我们的视线角度去观看元素时,元素的原点位置所在。其语法如下:

1
E { perspective-origin: x-position y-position; }

perspective 属性接受两个属性值,其属性值既可以取关键字值,也可以取长度值或百分比值。支持的关键字值如下:

  • top
  • bottom
  • left
  • right
  • center

该属性默认的值为 center center(等价于 50% 50%),即元素的绝对几何中心。

显示或隐藏背面

一般来说,当我们旋转元素时,一旦元素的正面远离我们,我们就会看到它的背面。但是默认情况下,元素似乎就像透明一样,所以实际上我们在元素背面会看到元素正面内容的反转图像。

3D模块的新增 backface-visibity 属性可以帮我们解决这个问题,该属性只接受两个关键字值:

  • hidden: 元素背面什么都不会显示
  • visible: 默认值,元素背面会呈现其正面的反转图像