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;
        }