Css旋转 缩放 移动 倾斜

今天与大家来分享一下我做的css3动画案例。
　　在展示我的案例之前先给大家说说实现这个案例所需要的一些属性。
　　transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。
　　通过 CSS3 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
　　 translate()===>移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
　　　　translate分为三种情况：
　　　　　　1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
　　　　　　2、translateX(x)仅水平方向移动（X轴移动）
　　　　　　3、translateY(y)仅垂直方向移动（Y轴移动）

rotate()===》旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。（单位：deg）
　　　　　 rotate(30deg);2D旋转 正角度-顺时针 负角度-逆时针

scale()===》缩放
　　　　scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
　　　　translate分为两种情况：

1、caleX(x)x轴扩大2倍
　　　　　　2、scaleY(y)y轴扩大2倍

skew()===》切斜
　　　　参数表示倾斜角度（单位：deg）
　　　　skew分为两种情况：