transform 字面上是:变换;改变,使…变形;转换的意思。

在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。

语法:
transform : none | <transform-function> [ <transform-function> ]*
也就是:
transform: rotate | scale | skew | translate |matrix;

一、旋转 rotate

.box{ transform: rotate(<angle>) ; }

demo:顺时针旋转30°

旋转30°

二、移动 translate

移动translate我们分为三种情况: translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
translateX(x)仅水平方向移动(X轴移动);
translateY(Y)仅垂直方向移动(Y轴移动)

demo1:水平向右和垂直向下,同时移动30px。 transform: translate(30px,30px);
demo2:水平向右移动30px。 transform: translateX(30px);
demo3:垂直向下移动30px。 transform: translateY(30px);

demo1
demo2
demo3

三、缩放 scale

原图

放大1.2倍

水平方向1.5倍

垂直方向1.5倍

四、扭曲 skew

扭曲skew和translate、scale一样同样具有三种情况:
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用如下:

原图

X轴+Y轴

水平方向

垂直方向

六、transform-origin 属性

transform-origin定义的是旋转的基点


transform-origin:
left top;

transform-origin:
right;

transform-origin:
20% 75%;

demo:顺时针旋转15°

旋转