css3动画属性--transform(变形)
2015-03-23 17:03
821 查看
在css3中transform主要包括以下几种:rotate(旋转)、translate(移动)、scale(缩放)、skew(扭曲)以及matrix(矩阵变形)。
语法:
transform : none | <transform-function> [ <transform-function> ]*
也就是:
transform: rotate | scale | skew | translate |matrix;none表示不进行变形,transform的这些属性可以叠加使用,叠加使用时用空格隔开。
下面对每个属性一一介绍:
rotate(旋转):
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(50deg)
translate(移动):
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。如transform:translate(100px,20px)。
scale(缩放):
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。如:transform:scale(2,1.5)。
skew(扭曲):
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。如:transform:skew(30deg,10deg)。
matrix(矩阵变形):
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵
如何改变元素基点transform-origin
transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样。如:transform-origin:(left,top)。
transform在不同浏览器内核下的书写规则
/*Mozilla内核浏览器:firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器:Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9+*/
-ms-transform: rotate | scale | skew | translate ;
/*标准*/
transform: rotate | scale | skew | translate ;
语法:
transform : none | <transform-function> [ <transform-function> ]*
也就是:
transform: rotate | scale | skew | translate |matrix;none表示不进行变形,transform的这些属性可以叠加使用,叠加使用时用空格隔开。
下面对每个属性一一介绍:
rotate(旋转):
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(50deg)
translate(移动):
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。如transform:translate(100px,20px)。
scale(缩放):
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。如:transform:scale(2,1.5)。
skew(扭曲):
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。如:transform:skew(30deg,10deg)。
matrix(矩阵变形):
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵
如何改变元素基点transform-origin
transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样。如:transform-origin:(left,top)。
transform在不同浏览器内核下的书写规则
/*Mozilla内核浏览器:firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器:Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9+*/
-ms-transform: rotate | scale | skew | translate ;
/*标准*/
transform: rotate | scale | skew | translate ;
相关文章推荐
- CSS3动画属性:变形(transform)
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
- css3 text-transform变形动画
- CSS3变形之transform-origin属性
- css3变形属性transform
- CSS3 变形、过渡、动画、关联属性浅析
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3变形之Transform-style和Perspective等属性
- css3动画属性系列之transform细讲scale缩放
- 不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;
- CSS3与动画有关的属性transition、animation、transform对比
- 总结CSS3变形transform属性
- CSS3中的动画,animation、transition和transform属性的运用
- CSS3中动画属性transform、transition和animation
- CSS3动画属性Transform解读
- css3动画属性详解之transform、transition、animation
- CSS3的 transform属性,怎么才能让他同时执行多个不同动画(属性)效果
- 8.HTML5 CSS3 变形与动画相关属性
- css3动画属性系列之transform细讲旋转rotate
- CSS3中和动画有关的属性transform、transition 和 animation