深入理解CSS3 Transform

2018-02-27 11:01:49来源:http://www.waibo.wang/bible/css3/html/8/8.1.html作者:极客头条人点击

分享
概述
CSS选择器
字体和文本
盒模型
元素的定位
链接和导航
表格和表单
变换、过渡和动画
变换

在CSS3之前,要实现元素的平移、旋转、缩放和倾斜效果,常常需要依赖图片、Flash或Javascript才能完成。


在CSS3中,使用变换(transform),就能轻松实现这些效果,而无需加载额外的文件,在提升开发效率的同时,还能提高页面的执行效率。变换的基本原理,是通过改变坐标系统,来实现元素的平移、旋转、缩放和倾斜等效果。


把实现平移、旋转、缩放、倾斜等所使用的方法,称作变换函数,它们分别是translate、rotate、scale、skew、matrix。


CSS3中,通过 transform属性指定一系列变换函数,来实现元素的变换效果。语法格式为:


transform: none | <transform-function> [ <transform-function> ]*

默认值为none,表示不进行变换;<transform-function>表示一个或多个变换函数,以空格分开。也就是说,变换可以用于任何元素,一个元素可以同时应用多种类型的变换,包括平移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)、及矩阵变换(matrix)。


CSS3中的变换包括2D变换和3D变换,2D变换在二维坐标系统中进行,3D变换在三维坐标系统中进行。笔者对3D变换研究不深,这里只介绍2D变换。


2D变换,就是在二维空间中,通过平移、旋转、缩放、倾斜和矩阵变换,来改变二维坐标系统中的 x 轴、 y 轴,进而实现元素的平移、旋转、缩放、倾斜效果。


平移

平移,就是在水平或垂直方向上,将元素移动指定的距离。平移有三个变换函数:


1)translate(tx, ty):在水平方向和垂直方向同时平移(即 x 轴和 y 轴同时移动)。如果未提供 ty,则使用默认值 0。


参数 tx 表示在 x 轴方向平移的距离,大于 0 时向右移动,小于 0 时向左移动,等于0 表示不平移;参数 ty 表示在 y 轴方向平移的距离,大于 0 时向下移动,小于 0 时向上移动,等于 0 表示不平移。


如,transform: translate(100px, 20px),表示将元素在 x 轴方向向右移动 100px,y 轴方向向下移动 20px。运行效果如图 8‑1 所示:





图8-1 translate效果


2)translateX(tx):只在 x 轴(水平方向)进行平移,相当于translate(tx, 0)。


如,transform: translateX (100px),表示将元素在 x 轴方向向右移动 100px,y 轴方向不进行移动。运行效果如图 8‑2 所示:





图8-2 translateX效果


3)translateY(ty):只在 y 轴(垂直方向)进行平移,相当于translate(0, ty)。


如,transform: translateY (20px),表示将元素在 y 轴方向向下移动 20px,x 轴方向不进行移动。运行效果如图 8‑3 所示:





图8-3 translateY效果


旋转

旋转,就是围绕变换的原点,将元素按顺时针或逆时针方向旋转指定的角度。旋转只有一个变换函数:


rotate(θ):将元素旋转 θ 所指定的角度。角度的单位为度(deg),正值表示顺时针旋转,负值表示逆时针旋转。


如,transform: rotate(45deg),表示将元素按顺时针方向旋转45°。运行效果如图 8‑4 所示:





图8-4 rotate效果


缩放

缩放,就是基于变换的原点,将元素在水平或垂直方向上缩小或放大指定的倍数。缩放有三个变换函数:


1)scale(sx, sy):在水平方向和垂直方向同时缩放(即 x 轴和 y 轴同时缩放)。如果未提供 sy,则 sy 与 sx 相等,即表示 x,y 两个方向的缩放比例相同。


参数 sx 表示在 x 轴方向的缩放比例,大于 1 时放大,小于 1 时缩小;参数 sy 表示在 y 轴方向的缩放比例,大于 1 时放大,小于 1 时缩小。默认情况下,sx 和 sy 参数的值均为 1,即不进行缩放。sx, sy 既可以是正值、也可以是负值。为负值时,首先把坐标轴的方向改变为相反方向,使元素在该方向上发生翻转,然后再执行缩放操作。


如,transform: scale (2, 1.5),表示将元素在 x 轴方向放大 2 倍,在 y 轴方向放大 1.5倍。运行效果如图 8‑5 所示:





图8-5 scale效果


2)scaleX(sx):只在 x 轴(水平方向)进行缩放,相当于scale(sx, 1)。


如,transform: scaleX (2),表示将元素在 x 轴方向放大 2 倍,在 y 轴方向不进行缩放。运行效果如图 8‑6 所示:





图8-6 scaleX效果


3)scaleY(sy):只在 y 轴(垂直方向)进行缩放,相当于scale(1, sy)。


如,transform: scaleY (1.5),表示将元素在 y 轴方向放大1.5 倍,在 x 轴方向不进行缩放。运行效果如图 8‑7 所示:





图8-7 scaleY效果


倾斜

倾斜,就是基于变换的原点,让元素绕水平轴或垂直轴倾斜指定的角度,也就是以 x 轴或 y 轴为轴心,让元素倾斜指定的角度。倾斜有三种个变换函数:


1)skew(θx, θy):在水平方向和垂直方向同时倾斜(即同时绕 x 轴和 y 轴倾斜)。如果未提供 θy,则使用默认值 0。


参数 θx 表示绕 x 轴倾斜的角度,正值表示逆时针倾斜,负值表示顺时针倾斜;参数 θy表示绕 y 轴倾斜的角度,正值表示顺时针倾斜,负值表示逆时针倾斜。注意两个参数的默认倾斜方向不同。


如,transform: skew(30deg, 10deg),表示元素在 x 轴方向按逆时针倾斜30°,在 y 轴方向按顺时针倾斜10°。效果如图 8‑8 所示:





图8-8 skew效果


skew() 是一个非常有用的变形函数,它可以将一个元素围绕着 x 轴或 y 轴,按一定角度进行倾斜。它与 rotate() 函数不同,rotate() 函数只是旋转,而不会改变元素的形状,skew() 函数会改变元素的形状。


从上图可以看出,经过skew() 函数变形之后,元素的形状发生了改变,由原来的矩形,变成了现在的菱形。


2)skewX(θx):只按 x 轴(水平方向)进行倾斜,相当于 skew(θx, 0)。


如,transform: skewX(30deg),表示元素在 x 轴方向按逆时针倾斜30°,在 y 轴方向不进行倾斜。效果如图 8‑9 所示:





图8-9 skewX效果


3)skewY(θy):只按 y 轴(垂直方向)进行倾斜,相当于skew (0, θy)。


如,transform: skewY(10deg),表示元素在 y 轴方向按逆时针倾斜10°,在 x 轴方向不进行倾斜。效果如图 8‑10 所示:





图8-10 skewY效果


矩阵变换

使用 transform 的变换函数 translate()、rotate()、scale()、skew(),让平移、旋转、缩放、倾斜等操作变得很简单,也很方便。


如果要对一个元素同时应用平移、旋转、缩放、倾斜等操作,就需要在 transform属性中指定多个变换函数,函数之间用空格分开。


为了方便,CSS提供了矩阵函数 matrix(),只需一个函数,就可以对元素同时应用多个变换函数。


2D变换矩阵是一个 3×3 的矩阵,共有6个参数,其格式为 matrix(a, b, c, d, e, f),这些参数对应的矩阵为:



简单的讲,matrix() 函数就表示,使用 a, b, c, d, e, f 这6个参数所构成的 3×3 的变换矩阵,通过矩阵乘法,来实现一个2D变换。变换规则如下:



其中,x、y是元素初始原点的坐标,x’ 、y’ 是变换后得到新原点的坐标。简化后,上述矩阵乘法运算得到的公式为:


x’ = ax + cy + e


y’ = bx + dy + f


根据上面的公式,使用不同的变换矩阵,就可以得到不同的变换效果。也就是说,只需为 a, b, c, d, e, f 提供特定的值,translate()、rotate()、scale()、skew() 这些变换函数,都可以通过矩阵函数 matrix() 实现。不同变换函数所对应的 matrix() 函数为:


translate(tx, ty):对应matrix(1, 0, 0, 1, tx, ty)。
scale(sx, sy):对应matrix(sx, 0, 0, sy, 0, 0)。
rotate(θ):对应matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。
skew(θx, θy):对应matrix(1, tan(θy), tan(θx), 1, 0, 0)。

说明:改变变换的原点


默认情况下,transform 所进行的 translate、rotate、scale、skew、matrix 等操作,都是以元素自身的中心点进行的。但很多时候,需要在不同的位置执行变换操作。这时,就可以通过 transform-origin 属性改变变换原点的位置,改变原点后,所有变换操作都将参考新原点进行。transform-origin的语法格式为:


transform-origin: (ox, oy)

其中,参数 ox 表示 x 轴的原点位置,参数 oy 表示 y 轴的原点位置。ox 和oy 的值可以是长度值、或百分比、或预定义值,数值允许负值。x 轴预定义值有 left(左边)、center(中间)、right(右边),y 轴预定义值有top(顶部)、center(中间)、bottom(底部)。如果未提供 oy 的值,则使用默认值 50%。


如,transform-origin: (left, top),水平方向上的原点为元素的左边,垂直方向上的原点为元素的顶部,即新基点为元素的左上角。如 图 8‑11 所示:





图8-11 新基点为元素的左上角


如,transform-origin: (right),水平方向上的原点为元素的右边,垂直方向上的原点为元素50%的位置。如图 8‑12 所示:





图8-12 新基点为元素的右边


如,transform-origin: (25%, 75%),水平方向上的原点为元素25%的位置,垂直方向上的原点为元素75%的位置。如图 8‑13 所示:





图8-13 新基点为元素25% 75%的位置



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台