CSS3 旋转、平移、缩放、倾斜

CSS3平移、缩放、倾斜、旋转

前言

下面代码用到了盒子如下：

使用

一、平移translate()

语法：translate(x轴平移距离, y轴平移距离)

使用方式如下：

/*	x轴平移200px，y轴平移100px	*/
transform: translate(200px, 100px);

二、缩放scale()

语法：scale(x轴放缩倍数, y轴放缩倍数)

使用方式如下：

/*	x轴放大两倍，y轴放大3倍	*/
transform: scale(2, 3);

三、倾斜skew()

语法：skew(x轴倾斜角度, y轴倾斜角度)

使用方式如下：

/*	x轴倾斜20度，y轴倾斜10度	*/
transform: skew(20deg, 10deg);

四、旋转rotate()

语法：rotate(旋转度数)

使用方式如下：

/*	旋转45度	*/
transform: rotate(45deg);

另外还可以使用rotateX(旋转度数)、rotateY(旋转度数)、rotateZ(旋转度数)指定3D旋转