CSS3 transform 中的 matrix

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);*/
    }