CSS3-transform,2D动画实例

2D转换

　　对元素进行移动。缩放。转动。拉长 或 拉伸
　　
　　　　全部都需要加前缀。

Transform-2D转换方法：rotate()旋转、scale()缩放、skew()扭曲/倾斜、translate()位移、matrix()矩形变形、

　　rotate(angle)：通过角度参数指定一个2D旋转，在参数中规定角度。

　　skew(x-angle,y-angle)：倾斜，沿着X和Y轴。
　　　　skewX(angle)：沿着X轴。
　　　　skewY(angle)：沿着Y轴。

　　scale(x,y)：转换，改变元素的宽高。
　　　　scaleX(n)：改变元素宽。
　　　　scaleY(n)：改变元素高。

　　translate(x,y)：转换，沿着X和Y轴移动元素。
　　　　translateX(n)：沿着X轴移动元素。
　　　　translateY(n)：沿着Y轴移动元素。

　　matrix(n,n,n,n,n,n)：转换，使用6个值的矩形,较为复杂，不常用。

 

 

DEMO

 

 

转载于:https://www.cnblogs.com/slowsoul/p/3139098.html