css3 transform的matrix 深入理解
阿新 • • 發佈:2018-12-15
計算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
#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; }