Heim  >  Artikel  >  Web-Frontend  >  css3动画属性transform(变形)_html/css_WEB-ITnose

css3动画属性transform(变形)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:461050Durchsuche

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

语法:

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


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn