CSS3 transform：matrix矩阵

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。

利用matrix()方法旋转盒子30°

<div class="box"> <div class="matrix"></div> </div>

css样式：

.box {
  width: 400px;
  height: 400px;
  margin: 80px auto;
  border: 1px dashed red;
}

.matrix {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 100px auto;
  transition: 0.6s ease;
}

.matrix:hover {
  transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}

代码演示：