本文共 646 字，大约阅读时间需要 2 分钟。

CSS3 中使用 transform 可以对元素进行变换。其中包含：位移、旋转、偏移、缩放。 transform 可以使用 translate/rotate/skew/scale 的方式来控制元素变换，也可以使用 matrix 的方式来控制元素变换。

.box {       width: 100px;    height: 100px;    background: #00C487;    transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);}

也可以使用 matrix 的方式：

.box {       width: 100px;    height: 100px;    background: #00C487;    transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);}

.box  {           position: absolute;        top: 10%;        left: 50%;        /*matrix（倍数·cosθ，sinθ，-sinθ，倍数·cosθ，0，0);*/        transform: translate(-5%, -55%) rotate(-38deg);        /*transform: matrix(0.866, -0.57, 0.9, 0.866, 0, 0);*/    }