回覆「資料」便可獲贈Python、Java學習資料css
CSS3 3D變換功能容許在3D空間中變換元素。ide
1、元素的3D轉換
使用CSS3 3D變換功能，能夠對三維空間中的元素執行基本的變換操做。如移動，旋轉，縮放和傾斜。函數
變換後的元素不會影響周圍的元素，但能夠像絕對定位的元素同樣將它們重疊。可是，變換後的元素在其默認位置（未變換）仍會在佈局中佔用空間。佈局
2、使用CSS變換和Transform()函數變換功能
CSS3 transform屬性使用變換功能來操縱元素使用的座標系，以便應用變換效果。學習
案例描述了3D變換功能。
1. translate3d()
rotation3d()函數將3D空間中的元素圍繞[x，y，z]方向向量爲圓點旋轉指定角度。這能夠寫成rotate(vx，vy，vz，angle)。flex
例：
<html><head><meta charset="utf-8"><title>項目</title><style>.container {width: 125px;height: 125px;perspective: 500px;border: 4px solid #e5a043;background: #fff2dd;}
.transformed {-webkit-transform: translate3d(25px, 25px, 50px);/* Chrome, Safari, Opera */transform: translate3d(25px, 25px, 50px);}
img {width: 125px;height: 125px;}</style></head><body style="background-color: aqua;"><h2>Before Translation:</h2><div class="container"><img src="timg.jpg" alt="Diamond Card"></div><h2>After Translation:</h2><div class="container"><img src="timg.jpg" class="transformed" alt="Diamond Card"></div></body></html>
該功能translate3d(25px, 25px, 50px)將圖像沿X和Y軸正方向移動25個像素，並沿Z軸正方向移動50個像素。
注：
3D變換使用三維座標系，可是沿Z方向的移動並不老是很明顯，由於這些元素存在於二維平面（平面）上而且沒有深度。
經過使Z軸上較高的元素（即距觀看者更近的元素看起來較大，而離觀看者更遠的元素看起來更小），能夠使用perspective和perspective-origin的CSS屬性爲場景添加深度感。
注意：
若是對一個元素應用3D變換而不設置透視，結果將不會顯示爲三維效果。
2. rotate3d()
該rotate3d()函數圍繞[x，y，z]方向向量將3D空間中的元素旋轉指定角度。能夠寫成rotate(vx, vy, vz, angle)。
例：
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8;}.transformed { -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */ transform: rotate3d(0, 1, 0, 60deg); }img {width: 125px;height: 125px;}
該功能rotate3d(0, 1, 0, 60deg)將圖像沿Y軸旋轉60度。也能夠使用負值沿相反方向旋轉元素。
3. scale3d()
scale3d()函數更改元素的大小。能夠寫成scale(sx, sy, sz)。除非將其與旋轉和透視圖等其餘變換功能結合使用，不然此功能的效果並不明顯。
例：
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #6486ab; background: #e9eef3;}.transformed { -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */ transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); }img {width: 125px;height: 125px;}
運行結果：
函數scale3d(1, 1, 2)沿Z軸縮放元素，函數rotate3d(1, 0, 0, 60deg)沿X軸旋轉圖像60度。
4. matrix3d()
matrix3d()功能能夠一次執行全部3D轉換，例如平移，旋轉和縮放。它採用4×4轉換矩陣]形式的16個參數。
這是使用matrix3d()功能執行3D轉換的示例。
示例
.container {width: 125px;height: 125px;perspective: 300px;border: 4px solid #d14e46;background: #fddddb;}
.transformed {-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);/* Chrome, Safari, Opera */transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);}
img {width: 125px;height: 125px;}
可是，一次執行多個轉換時，使用單個轉換函數並按順序列出它們會更方便，以下所示：
示例
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8;}.transformed { -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */ transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); }img {width: 125px;height: 125px;}
3、總結
本文基於CSS基礎，教讀者如何去進行2D->3D的轉換，介紹了常見的的幾個方法。去進行移動、縮放、轉動、拉長或拉伸等一系列操做。使用Html語言，使用豐富的案例，以及效果圖的展現。
歡迎你們積極嘗試，有時候看到別人實現起來很簡單，可是到本身動手實現的時候，總會有各類各樣的問題，切勿眼高手低，勤動手，才能夠理解的更加深入。
但願可以幫助你學習。
------------------- End -------------------
往期精彩文章推薦：
本文分享自微信公衆號 - IT共享之家（info-share）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。