css3动画属性--transform(变形)

当前位置 : 首页 > 网页制作 > CSS > css3动画属性--transform(变形)

css3动画属性--transform(变形)

来源: 作者: 时间:2016-01-20 09:22
在css3中transform主要包括以下几种:rotate(旋转)、translate(移动)、scale(缩放)、skew(扭曲)以及matrix(矩阵变形)。语法:transform : none | [ ]* 也就是:transform: rotate |

css3中transform主要包括以下几种:rotate(旋转)、translate(移动)、scale(缩放)、skew(扭曲)以及matrix(矩阵变形)。

语法:

transform : none |  [  ]* 
也就是:
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(, , , , , ) : 以一个含六值的(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 ;


Tag:
网友评论

<