CSS中的transform

transform这个属性非常强大，可以用来旋转、缩放、移动、倾斜等。

1. 旋转元素:
transform: rotate(45deg);

2. 缩放元素:
  transform: scale(1.5, 0.5);

3. 移动元素:
  transform: translate(50px, 100px);

4. 倾斜元素:
  transform: skew(20deg, 30deg);

5. 组合变换:
旋转45度。
缩放1.5倍。
沿x轴平移50像素。
沿y轴平移100像素。
你可以将这些变换组合在一个 transform 属性中，如下所示：
  .element {
  transform: rotate(45deg) scale(1.5) translate(50px, 100px);
}

当然矩阵变换完全可以代替它,但是矩阵太过复杂了 这里就不提了

当我们设置了 transform-style: preserve-3d

后我们就可以对上述4中变换的z轴进行设置 (不然看不出效果)

如:transform: rotateX(-45deg) rotateZ(-45deg)