css3 transform的matrix 深入理解

计算matrix() , 理解各个参数

matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

在图形学上，这种叫做齐次坐标矩阵，用齐次坐标矩阵和图形的顶点相乘，就能得到变换后的新顶点的位置。比如，图形有一个顶点（a，b），现使图形整体延x轴平移100px，平移后该顶点的位置应该是（a+100，b）。很明显，下面的矩阵运算就表示了这个过程：

因此，知道了这个齐次坐标矩阵，就可以算出任何一点变换后的位置，所以，这个齐次坐标矩阵就是变换矩阵。

如果该点再次延y轴平移100px，平移后的新位置应该是（a+100,b+100）,则整个过程可表示成：

例如：

我要实现如下图的效果（a=1,b=1,c=0,d=1,e=100,f=100），css如下

 #box6{
            -webkit-transform: matrix(1, 1, 0, 1, 100, 100);
            transform: matrix(1, 1, 0, 1, 100, 100);
        }

css3 的3D转换

rotateX() 方法：元素围绕其 X 轴以给定的度数进行旋转

rotateY() 旋转：元素围绕其 Y 轴以给定的度数进行旋转。

注意：实现3D效果需要将X,Y,Z方结合起来

<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg) 1 </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)2</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)3</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg) 4 </p>
</div>

css代码：

    display: inline-block;
            margin: 10px;
            background: #fff;
            padding: 15px;
            min-width: 200px;
            box-shadow: 0 3px 5px #ddd;
            color: #555;
        }
        .card .box {
            width: 100px;
            height: 100px;
            margin: auto;
            background: #ddd;
            cursor: pointer;
            box-shadow: 0 0 5px #ccc inset;
        }
        .card .box .fill {
            width: 100px;
            height: 100px;
            position: relative;
            background: #03A9F4;
            opacity: .5;
            box-shadow: 0 0 5px #ccc;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
        .card p {
            margin: 25px 0 0;
        }