css3 transform(变形)笔记

Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

一、旋转rotate

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

二、移动translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）

1、translate(<translation-value>[, <translation-value>]) ：如transform:translate(100px,20px)

2、translateX(<translation-value>) ：如：transform:translateX(100px)

3、translateY(<translation-value>) ：如：transform:translateY(20px)

三、缩放scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

1、scale(<number>[, <number>])：如：transform:scale(2,1.5)

2、scaleX(<number>) ：如：transform:scaleX(2)

3、scaleY(<number>) ：如：transform:scaleY(2)

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

1、skew(<angle> [, <angle>]) ：如：transform:skew(30deg,10deg)

2、skewX(<angle>) ：如：transform:skewX(30deg)

3、skewY(<angle>) ：如：transform:skewY（10deg）

五、矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，详细解读matrix

改变元素基点transform-origin

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。

transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀，下面列出各种浏览器内核下的语法规则：

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform-origin: x y;
  //Webkit内核浏览器：Safari and Chrome
  -webkit-transform-origin: x y;
  //Opera
  -o-transform-origin: x y ;
  //IE9
  -ms-transform-origin: x y;
  //W3C标准
  transform-origin: x y ;

参考链接：http://www.w3cplus.com/content/css3-transform

css3 transform(变形)笔记

猜你喜欢