CSS3 全新的 2D/3D 变换模块,浑身散发着迷人的魅力。
Transform
CSS3 的 transform
属性允许我们移动、旋转、缩放和倾斜元素。它的基本语法如下:
|
|
其中有若干函数可以供我们使用,可用 function 如下:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
1.1 transform-origin
变换原点是元素进行变换动作时所依据的点,例如:旋转变换就是绕着不动的变换原点进行旋转等,注意: 一般来说,旋转原点的坐标是固定不变的(参考坐标系是元素自身,即元素左上角为坐标系原点),各种变换动作进行时,变换原点是它们的依据。
变换动作默认的原点是元素的几何中心。但我们可以使用属性 transform-origin
指定变换动作的变换原点。其语法如下:
|
|
其中 x y 分别用于设置变换原点的横坐标与纵坐标,可以使用长度值或者百分比值,也可以使用下列的关键字值:
top
bottom
left
right
center
如果仅仅提供了一个参数,那么纵坐标 y 会被设置为 center
。
旋转
旋转就是让一个元素围绕一个固定的点进行旋转。其语法如下:
|
|
θ 是一个表示角度的值,其值循序 CSS3 的取值与单位模块中关于角度的规范,一般来说,我们使用角度即可。
如果 θ 为正值,即是顺时针旋转,如果为负值,则代表逆时针旋转 |θ| 度。注意,旋转 θ(θ<0) 度与 (360-|θ|) 度是一样的。
文档流中的位置
元素一旦经过变换,看起来就像把 position: relative
应用到它身上。也就是说,该元素几乎就像是两个元素一样。原始的、转换前的元素会保持它在文档流中的位置,所以后续的元素都会受到它的 margin
和 padding
的影响。经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层当中,意味着这个新的元素可以覆盖后续的元素。
移动
控制移动的函数是 translate()
,该函数将元素从它的默认位置进行平移。在 2D 变换模块它包含了下列两个独立函数:
translateX()
translateY()
这两个函数分别控制元素在 x轴 y轴 移动的距离,其可以简写为:
|
|
其中 x y 即分别表示在元素在 x轴 y轴 移动的距离。我们也可以简写,只使用一个值,如下:
|
|
如此一来,元素就是仅仅会在 x轴上进行平移。
需要注意的是,尽管 translate()
函数的表现颇像相对定位 position: relative;
中的 left
top
属性,但是二者还是有区别的,经过变换的元素会保留它的位置,只是从显示上看起来向被移动过,被变换的是元素的图像,而不是元素本身。
倾斜
skew()
函数允许修改元素的水平轴或垂直轴的角度,使用语法如下:
|
|
就像 translate()
一样,上述语法其也可以拆分为下列两个单独的函数:
skewX(α)
skewY(β)
skew()
函数使用的是角度值,也可以使用负值,而函数的简写形式可以使用一个或两个值。如果使用一个值,第二个值 skewY 会默认为 0。
如果是沿着 x轴 倾斜,那么就是元素的水平边依然保持水平,而竖直边则按照度数倾斜旋转;如果是沿着 y轴 倾斜,那么就是元素的竖直边依然保持竖直状态,但是水平边则按照度数倾斜旋转。
缩放
我们可以使用 scale()
函数,来使一个元素与原来相比变得更大或者更小。其使用语法如下:
|
|
scale()
也可以拆分为下列两个独立函数:
scaleX()
scaleY()
与以往不同,scaleX
scaleY
的值是 无单位的数字
,默认尺寸是1。
如果我们使用简写属性,而且提供了一个值,那么另外一个值会被默认为是与第一个值相同的。
我们还可以使用负值,使用负值的效果就是垂直的翻转元素
,创建原来元素的映射。
多重变换
我们可以在一个单独元素上引用多重变换,只需要在 transform
属性中用空格隔开各个变换函数即可:
|
|
矩阵变换
关于在 transform
属性中使用矩阵变换函数的 matrix()
的详细语法,看这里详解 CSS3 矩阵变换函数 matrix()