CSS3 Transform 转换属性

整    理:徐秀、晋哲

时    间:2015-12-04

说    明:CSS3 Transform基本语法以及基础用法的介绍。

一、名词解释

transform字面上就是变形,改变的意思,包括2D transform和3D transform。在CSS3中transform主要包括以下几种:移动translate()、旋转rotate()、扭曲skew()、缩放scale()以及矩阵变形matrix(),对内联元素(inline)和块级元素(block)都适用。

二、浏览器兼容性
注意:transform是CSS3新属性,目前兼容浏览器【盗图】:image001

和其它CSS3新属性一样,transform要加兼容前缀。

三、transform-origin属性

transform-origin在元素发生transform变换时有效,是发生变换的基点,以此点建立【2d/3d】坐标。默认值为:transform-origin:50% 50% [0]; 第三个参数是3d转换下z的值,默认0。当改变transform-origin的值时,transform参照基点发生改变,如: transform-origin:0 0;image002

其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom。

四、语法讲解

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

未经transform转换的div,以下各种变换均以此为参照:image003

  • transform:translate();

通过指定translation(tx,ty)进行矢量偏移,translation3d(tx,ty,tz);参数tx 是x轴方向的偏移矢量,ty 可选参数是y轴方向的偏移矢量。translation3d()中的各值,表示在对应方向的偏移量。tx,ty,tz的取值可以是具体的像素值,也可以是百分比,百分比的的取值相对于自身的宽高。translate(),表示对对象进行平移,当值为负数时,反方向移动物体。分别指定指定轴上的偏移量可以。通过transform-origin属性改变基点。

其它写法:translateX(x)【适用于2d/3d】,translateY(y) 【适用于2d/3d】;translateZ(z) 【适用于3d】,

代码:image004image005效果:image005

  • transform:rotate();

通过指定的角度参数对指定元素指定一个rotate(angle)进行2d旋转,rotate3d(rx,ry,rz,angle)进行3d旋转;rx,ry,rz可以取【1:正方向;-1:反方向;0不旋转】;在指定方向选择angle度; angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。可以通过transform-origin属性改变基点。

其它写法:rotateX(angle) 【适用于3d】;rotateY(angle) 【适用于3d】;rotateZ(angle) 【适用于3d】
代码:image007image008效果:image009

  • transform:scale();

通过指定scale(sx,sy)的sx、sy参数对指定元素进行2d缩放; scale3d(sx,sy,sz)进行3d缩放。2d缩放的第二个参数可选,未提供,则取与第一个参数一样的值;3d的三个参数都必写,表示在对应方向的缩放比例。可以通过transform-origin对元素的基点进行设置。

其它写法:scaleX(x)【适用于2d/3d】,scaleY(y) 【适用于2d/3d】;scaleZ(z) 【适用于3d】。

代码:image011image010 效果:image012

  • transform:skew();

通过指定skew(x-angle, y-angle)的x-angle、 y-angle参数对指定元素在指定方向上发生倾斜; skew()没有3d写法;x-angle是水平方向扭曲角度,y-angle可选,是垂直方向扭曲角度。如未设置y-angle,那么Y轴倾斜角度为0deg。

其它写法:skewX(x)【适用于2d】,skewY(y) 【适用于2d】。
代码:image013image014效果:
111

  • transform: matrix ();

matrix():2d矩阵包含6个值matrix(a,b,c,d,e,f);3d矩阵包含16个之matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)4*4个值,以上的各种变换(2d/3d),都可以矩阵计算得到相应效果,单计算过程很复杂,此处就不赘述了。有兴趣的小伙伴可以自行学习下。

发表评论