CSS3(二)

2D

transform

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()

1. translate() 元素向指定的方向移动,类似于position中的relative。(偏移)

   • translate (x轴位移的值 )
   • translateY (y轴位移的值)
   • translate(X,Y) 位移的值可为负数，是加了单位的属性值 。

2. scale(1,0.5) X.Y的缩放 (缩放)

   • 可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
   • scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1
   • scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是1

3. rotate() 旋转

   • rotateX(***deg) 方法，元素围绕其 X 轴以给定的度数进行旋转
   • rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
   • rotate(50deg)代表的围绕Z轴旋转50度

4. skew()倾斜

   • skewY() Y轴倾斜

   • skewX() X轴倾斜

   • 一个参数时：表示水平方向的倾斜角度；

   • 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

transform-origin 元素变形圆点（例：transform-origin:100px top）