CSS3变形

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

2D位移

translate(tx,ty);

tx：X轴（横坐标）移动的向量长度。

ty：Y轴（横坐标）移动的向量长度。

width: 100px;
height: 100px;
background:red;
transform: translate(100px,20px);

1. x轴向右移动100px y轴向下移动20px。

transform: translateX(30px);

2. x轴向右移动30px，y轴不移动。

 

transform: translateY(50px);

3. x轴不移动，y轴向下移动50px。

 2D缩放

scaleX(sx,sy);

sx：表示X轴的缩放。

sy：表示Y轴的缩放。

transform: scaleX(2); 宽度放大两倍，高度不变,等同于transform:scale(2,1)。

transform: scaleY(.5); 宽度不变，高度缩小一倍,等同于transform:scale(1,.5)。

注意：缩小的时候也是从中心开始缩小的。

2D倾斜

skew(ax, ay);

ax：水平方向（X轴）的倾斜角度。

ay：垂直方向（Y轴）的倾斜角度。

skewX（ax）：表示只设置X轴的倾斜。

skewY（ay）：表示只设置Y轴的倾斜。

注意：skew只设置一个值表示x轴倾斜的度数。

2D旋转

rotate(a);

参数a单位使用deg表示，a取正值时元素相对原来中心顺时针旋转。

rotate旋转和skew倾斜的区别：

rotate( )函数只是旋转，而不会改变元素的形状。

skew( )函数是倾斜，元素不会旋转，会改变元素的形状。