CSS3动画制作

 

2D Transforms：

 

• translate()  ：translate(x,y)水平方向和垂直方向同时移动，单位为：px
• 
• rotate()  ：rotate(<angle>) 通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），单位为:deg
• 
• scale()  ：scale(x,y)使元素水平方向和垂直方向同时缩放，单位为：比例
• 
• skew()  ：skew(x,y)使元素在水平和垂直方向同时扭曲，单位为:deg
• 
• matrix()  ：
• 
• transform-origin: x-axis y-axis z-axis;

2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis