当前位置: 首页 > CSS3学习笔记 > 正文

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解)

CSS3 transform 是什么?

transform 字面上是:变换;改变,使…变形;转换的意思。

在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。

语法:

   transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换;<transform-function>表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如 rotate、scale、translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但 transform 中使用多个属性时却需要有空格隔开。

下面我们分别来介绍这几个属性值参数的具体使用方法:

rotate()  旋转函数 取值度数
    deg  度数
    transform-origin 旋转的基点
translate() 位移函数
    translateX()
    translateY()
skew() 倾斜函数 取值度数 
    skewX()
    skewY()
scale() 缩放函数 取值 正数、负数和小数
    scaleX()
    scaleY()

一、旋转 rotate

语法:

    transform: rotate(<angle>) ;

通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
transform-origin 定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg)

旋转 rotate

二、位移 translate

translate我们分为三种情况:

translate(x,y) 水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动),如:transform:translate(100px,20px)

translateX(x) 仅水平方向移动(X轴移动),如:transform:translateX(100px)

translateY(y) 仅垂直方向移动(Y轴移动),如:transform:translateY(20px)

具体效果如下(或点击这里查看demo):

位移 translate

当参数值x,y为负数时,反方向移动物体,它们基点默认为元素中心点,也可以根据transform-origin进行改变基点。

三、缩放 scale

缩放scale和位移translate是极其相似,它也有三种情况:

scale(x,y)使元素水平方向和垂直方向同时缩放(X轴和Y轴),如:transform:scale(2,1.5)

scaleX(x)元素仅水平方向缩放(X轴缩放),如:transform:scaleX(2)

scaleY(y)元素仅垂直方向缩放(Y轴缩放),如:transform:scaleY(2)

具体效果如下(或点击这里查看demo):

缩放 scale

它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。

如果scale(x,y)没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的,并以X为准。

四、扭曲(倾斜) skew

扭曲skewtranslate、scale一样同样具有三种情况:

skew(x,y) 使元素在水平和垂直方向同时扭曲(X轴和Y轴),如:transform:skew(30deg,10deg)

skewX(x) 仅使元素在水平方向扭曲变形(X轴),如:transform:skewX(30deg)

skewY(y) 仅使元素在垂直方向扭曲变形(Y轴),如:transform:skewY(10deg)

具体效果如下(或点击这里查看demo):

扭曲(倾斜) skew

同样它们是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。

五、矩阵 matrix

matrix() 方法是一种简写形式,有六个参数,包含旋转,缩放,移动(平移)和倾斜的功能。

语法:

    matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

它以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。也就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,这里就不多说了。

六、改变元素基点 transform-origin

前面我们多次提到transform-origin这个东东,它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为元素默认基点就是其中心位置。下面我们主要来看看其使用规则:
语法

    transform-origin: x-axis y-axis;
描述
x-axis

定义视图被置于 X 轴的何处。可能的值:

  • left

  • center

  • right

  • length

  • %

y-axis

定义视图被置于 Y 轴的何处。可能的值:

  • top

  • center

  • bottom

  • length

  • %

其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%;而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例(或点击这里查看demo):

改变元素基点 transform-origin

浏览器支持

同样的transform在IE9下版本是无法兼容的,下面表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

transform 转换应用实例

1、css3 同时实现旋转和缩放(放大或缩小)

.demo1-1:hover{ transform: rotate(360deg) scale(1.5);}
.demo1-2:hover{ transform: rotate(360deg) scale(.5);}

2、CSS3 实现位移并且带有放大或缩小的效果

.demo2-1:hover{ transform: scale(1.2) translateX(100px); }
.demo2-2:hover{ transform: scale(.8) translateX(100px); }

3、css3 旋转后发生位移

.demo3{ animation: demo3 3s linear 0s infinite; }
@keyframes demo3{
	0%{}
	30%{ transform: rotate(360deg); }
	60%{ transform: translateX(100px); }
	100%{ transform: translateX(100px); }
}

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解):等您来吐槽!

发表评论

您必须 [ 登录 ] 才能发表留言!