CSS3之美(十二):2D变换

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

Transform

CSS3 的 transform 属性允许我们移动、旋转、缩放和倾斜元素。它的基本语法如下:

1
E { transform: function(value); }

其中有若干函数可以供我们使用,可用 function 如下:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

1.1 transform-origin

变换原点是元素进行变换动作时所依据的点,例如:旋转变换就是绕着不动的变换原点进行旋转等,注意: 一般来说,旋转原点的坐标是固定不变的(参考坐标系是元素自身,即元素左上角为坐标系原点),各种变换动作进行时,变换原点是它们的依据。

变换动作默认的原点是元素的几何中心。但我们可以使用属性 transform-origin 指定变换动作的变换原点。其语法如下:

1
E { transform-origin: x y; }

其中 x y 分别用于设置变换原点的横坐标与纵坐标,可以使用长度值或者百分比值,也可以使用下列的关键字值:

  • top
  • bottom
  • left
  • right
  • center

如果仅仅提供了一个参数,那么纵坐标 y 会被设置为 center

旋转

旋转就是让一个元素围绕一个固定的点进行旋转。其语法如下:

1
E { tranform: rotate(θ); }

θ 是一个表示角度的值,其值循序 CSS3 的取值与单位模块中关于角度的规范,一般来说,我们使用角度即可。

如果 θ 为正值,即是顺时针旋转,如果为负值,则代表逆时针旋转 |θ| 度。注意,旋转 θ(θ<0) 度与 (360-|θ|) 度是一样的。

文档流中的位置

元素一旦经过变换,看起来就像把 position: relative 应用到它身上。也就是说,该元素几乎就像是两个元素一样。原始的、转换前的元素会保持它在文档流中的位置,所以后续的元素都会受到它的 marginpadding 的影响。经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层当中,意味着这个新的元素可以覆盖后续的元素。

移动

控制移动的函数是 translate(),该函数将元素从它的默认位置进行平移。在 2D 变换模块它包含了下列两个独立函数:

  • translateX()
  • translateY()

这两个函数分别控制元素在 x轴 y轴 移动的距离,其可以简写为:

1
E { transform: translate(X, Y); }

其中 x y 即分别表示在元素在 x轴 y轴 移动的距离。我们也可以简写,只使用一个值,如下:

1
E { tranform: translate(X); }

如此一来,元素就是仅仅会在 x轴上进行平移。

需要注意的是,尽管 translate() 函数的表现颇像相对定位 position: relative; 中的 left top 属性,但是二者还是有区别的,经过变换的元素会保留它的位置,只是从显示上看起来向被移动过,被变换的是元素的图像,而不是元素本身。

倾斜

skew() 函数允许修改元素的水平轴或垂直轴的角度,使用语法如下:

1
E { transform: skew(α, β); }

就像 translate() 一样,上述语法其也可以拆分为下列两个单独的函数:

  • skewX(α)
  • skewY(β)

skew() 函数使用的是角度值,也可以使用负值,而函数的简写形式可以使用一个或两个值。如果使用一个值,第二个值 skewY 会默认为 0。

如果是沿着 x轴 倾斜,那么就是元素的水平边依然保持水平,而竖直边则按照度数倾斜旋转;如果是沿着 y轴 倾斜,那么就是元素的竖直边依然保持竖直状态,但是水平边则按照度数倾斜旋转。

缩放

我们可以使用 scale() 函数,来使一个元素与原来相比变得更大或者更小。其使用语法如下:

1
E { transform: scale(x, y); }

scale() 也可以拆分为下列两个独立函数:

  • scaleX()
  • scaleY()

与以往不同,scaleX scaleY 的值是 无单位的数字,默认尺寸是1。

如果我们使用简写属性,而且提供了一个值,那么另外一个值会被默认为是与第一个值相同的。

我们还可以使用负值,使用负值的效果就是垂直的翻转元素,创建原来元素的映射。

多重变换

我们可以在一个单独元素上引用多重变换,只需要在 transform 属性中用空格隔开各个变换函数即可:

1
E { transform: function(value) function(value) ...; }

矩阵变换

关于在 transform 属性中使用矩阵变换函数的 matrix() 的详细语法,看这里详解 CSS3 矩阵变换函数 matrix()