帶你玩轉css3的3D！
話很少說，先上democss
- 酷炫css3走馬燈/正方體動畫： bupt-hjm.github.io/css3-3d/
- github源碼地址：github.com/BUPT-HJM/cs…
- 酷炫css3翻頁動畫： bupt-hjm.github.io/css3-flip-b…
- github源碼地址：github.com/BUPT-HJM/cs…
以上均純css3實現，沒有使用任何js代碼，但願能獲得你們的star啦~html
若是格式出現問題，本文也同步發在個人博客上bupt-hjm.github.io/2016/07/26/…，也歡迎關注。css3
css3的3d起步
要玩轉css3的3d，就必須瞭解幾個詞彙，即是透視(perspective)、旋轉(rotate)和移動(translate)。透視便是以現實的視角來看屏幕上的2D事物，從而展示3D的效果。旋轉則再也不是2D平面上的旋轉，而是三維座標系的旋轉，就包括X軸，Y軸，Z軸旋轉。平移同理。git
固然用理論來講明，估計你還不明白。下面是3個gif：github
- 沿着X軸旋轉
- 沿着Y軸旋轉
- 沿着Z軸旋轉
旋轉應該沒問題了，那理解平移起來就比較容易了，就是在在X軸、Y軸、z軸移動。web
你可能會說透視比較很差理解，下面我介紹一下透視的幾個屬性。瀏覽器
perspective
perspective英文名即是透視，沒有這東西就沒辦法造成3D效果，可是這個東西是怎麼讓咱們瀏覽器造成3D 效果的呢，能夠看下面這張圖，其實學過繪畫的應該知道透視關係，而這裏就是這個道理。 
wordpress
可是在css裏它是有數值的，例如perspective: 1000px這個表明什麼呢？咱們能夠這樣理解，若是咱們直接眼睛靠着物體看，物體就超大佔滿咱們的視線，咱們離它距離愈來愈大，它在變小，立體感也就出來了是否是，其實這個數值構造了一個咱們眼睛離屏幕的距離，也就構造了一個虛擬3D假象。學習
perspective-origin
由上面咱們瞭解了perspective，而加上了這個origin是什麼，咱們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，咱們的視點的不一樣位置就決定了咱們看到的不一樣景象，默認是中心，爲perspectice-origin: 50% 50%,第一個數值是 3D 元素所基於的 X 軸，第二個定義在 y 軸上的位置動畫
當爲元素定義 perspective-origin 屬性時，其子元素會得到透視效果，而不是元素自己。必須與 perspective 屬性一同使用，並且隻影響 3D 轉換元素。(W3school)
transform-style
perspective又來了，沒錯，它是css中3D的關鍵，transform-style默認是flat，若是你要在元素上視線3D效果的話，就必須用上transform-style: preserve-3d,不然就只是平面的變換，而不是3D的變換
手把手帶你玩轉css3-3d
以上咱們稍微瞭解概念，下面就開始實戰吧！ 咱們看一個效果，是否是很酷炫~ 
若是圖片加載不出來，就直接訪問bupt-hjm.github.io/css3-3d/，以爲能夠的話記得給star咯hh
第一步：html結構
很簡單的一個容器包裹着一個裝了6個piece的piece-box
<div class="container">
<div class="piece-box">
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>複製代碼
第二步： 加上必要的3D屬性，進入3D世界
經過上面的講解，應該對perspective比較熟悉了吧,
/*容器*/
.container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
/*piece盒子*/
.piece-box {
perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}複製代碼
第三步：加入必要的樣式
/*容器*/
.container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
/*piece盒子*/
.piece-box {
position: relative;
width: 200px;
height: 200px;
margin: 300px auto;
perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/*piece通用樣式*/
.piece {
position: absolute;
width: 200px;
height: 200px;
background: red;
opacity: 0.5;
}
.piece-1 {
background: #FF6666;
}
.piece-2 {
background: #FFFF00;
}
.piece-3 {
background: #006699;
}
.piece-4 {
background: #009999;
}
.piece-5 {
background: #FF0033;
}
.piece-6 {
background: #FF6600;
}複製代碼
固然，在你完成這步以後你仍是隻看到一個正方形，也就是咱們的piece-6,由於咱們的3Dtransform還沒開始 
第四步：3D變換來襲
首先是實現走馬燈，咱們先不要讓它走，先實現燈部分。 如何實現呢？由於要構成一個圓，圓是360度，而咱們有6個piece，那麼，很容易想到，咱們須要把每個piece以遞增60度的方式rotateY，就變成以下 
如何把他們從中心拉開呢？
這裏咱們還要注意一點，在咱們使元素繞Y軸旋轉之後，其實X軸和Z軸也會跟着旋轉，所因此正方體的每一個面的垂直線仍是Z軸，咱們就只須要改變下
translateZ的值,而當translateZ爲正的時候，就朝着咱們的方向走來，這樣就能夠拉開了
可是拉開的距離如何衡量？
是否是一目瞭然了~
下面咱們再修改下css
.piece-1 {
background: #FF6666;
-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);
}
.piece-2 {
background: #FFFF00;
-webkit-transform: rotateY(60deg) translateZ(173.2px);
-ms-transform: rotateY(60deg) translateZ(173.2px);
-o-transform: rotateY(60deg) translateZ(173.2px);
transform: rotateY(60deg) translateZ(173.2px);
}
.piece-3 {
background: #006699;
-webkit-transform: rotateY(120deg) translateZ(173.2px);
-ms-transform: rotateY(120deg) translateZ(173.2px);
-o-transform: rotateY(120deg) translateZ(173.2px);
transform: rotateY(120deg) translateZ(173.2px);
}
.piece-4 {
background: #009999;
-webkit-transform: rotateY(180deg) translateZ(173.2px);
-ms-transform: rotateY(180deg) translateZ(173.2px);
-o-transform: rotateY(180deg) translateZ(173.2px);
transform: rotateY(180deg) translateZ(173.2px);
}
.piece-5 {
background: #FF0033;
-webkit-transform: rotateY(240deg) translateZ(173.2px);
-ms-transform: rotateY(240deg) translateZ(173.2px);
-o-transform: rotateY(240deg) translateZ(173.2px);
transform: rotateY(240deg) translateZ(173.2px);
}
.piece-6 {
background: #FF6600;
-webkit-transform: rotateY(300deg) translateZ(173.2px);
-ms-transform: rotateY(300deg) translateZ(173.2px);
-o-transform: rotateY(300deg) translateZ(173.2px);
transform: rotateY(300deg) translateZ(173.2px);
}複製代碼
是否是已經實現了走馬燈了？ 
第五步：animation讓3D動起來
要實現走馬燈動，其實很簡單，咱們只要在piece-box上加上旋轉動畫就好了,5s完成動畫，從0度旋轉到360度
/*piece盒子*/
.piece-box {
position: relative;
width: 200px;
height: 200px;
margin: 300px auto;
perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
animation: pieceRotate 5s;
-moz-animation: pieceRotate 5s; /* Firefox */
-webkit-animation: pieceRotate 5s; /* Safari and Chrome */
-o-animation: pieceRotate 5s ; /* Opera */
}
/*走馬燈動畫*/
@keyframes pieceRotate
{
0% {-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes pieceRotate
{
0% {-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
0% {-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);}
}
/* Opera */
@-o-keyframes pieceRotate
{
0% {-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);}
}複製代碼
這裏就不放gif了~hhh是否是實現了酷炫的效果，還沒結束哦~更酷炫的正方體組裝
正方體，其實也不難實現，我這裏就不很詳細說了，你首先能夠想象一個面，而後去拓展其餘面如何去實現，好比咱們把正方體的前面
translateZ(100px）讓它靠近咱們100px,而後後面translateZ(-100px）讓它遠離咱們100px,左邊是先translateX(-100px再rotateY(90deg),右邊就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要咱們寫進動畫，一切就大功告成。
css就爲以下，如下就只放piece1，其餘讀者能夠本身類比實現，或者看我github的源碼
.piece-1 {
background: #FF6666;
-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);
animation: piece1Rotate 5s 5s;
-moz-animation: piece1Rotate 5s 5s; /* Firefox */
-webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
-o-animation: piece1Rotate 5s 5s; /* Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
/*front*/
@keyframes piece1Rotate
{
0% {-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);}
100% {-webkit-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);}
}
/* Firefox */
@-moz-keyframes piece1Rotate
{
0% {-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);}
100% {-webkit-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);}
}
/* Safari and Chrome */
@-webkit-keyframes piece1Rotate
{
0% {-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);}
100% {-webkit-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);}
}
/* Opera */
@-o-keyframes piece1Rotate
{
0% {-webkit-transform: rotateY(0deg) translateZ(173.2px);
-ms-transform: rotateY(0deg) translateZ(173.2px);
-o-transform: rotateY(0deg) translateZ(173.2px);
transform: rotateY(0deg) translateZ(173.2px);}
100% {-webkit-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);}
}複製代碼
細心的讀者能夠發現我用了一個
animation-fill-mode: forwards;,這個其實就是讓這些piece保持動畫最後的效果，也就是正方體的效果，讀者能夠不加試試看，那仍是會恢復原樣。
最後就是正方體的旋轉了，前面咱們的容器已經用過animation了,讀者可能會想我再加個class放animaiton不就好了，hhh，animaiton會覆蓋掉前面的，那前面的走馬燈的動畫就沒了，因此在html結構中，我再加了一個box包裹piece, 以下
<div class="container">
<div class="piece-box">
<div class="piece-box2"><!--新加的容器-->
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>
</div>複製代碼
在動畫上咱們能夠控制正方體動畫的延時時間，就是等到正方體組裝完成後再開始動畫 animation: boxRotate 5s 10s infinite;第一個5s是動畫時長，第二個10s是延時時間，而後咱們讓正方體的旋轉，繞X軸從0度到360度,繞Y軸也0到Y軸360度。
.piece-box2 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
animation: boxRotate 5s 10s infinite;
-moz-animation: boxRotate 5s 10s infinite; /* Firefox */
-webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
-o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方體旋轉動畫*/
@keyframes boxRotate
{
0% {-webkit-transform: rotateX(0deg) rotateY(0deg););
-ms-transform: rotateX(0deg) rotateY(0deg););
-o-transform: rotateX(0deg) rotateY(0deg););
transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg);
-o-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes boxRotate
{
0% {-webkit-transform: rotateX(0deg) rotateY(0deg););
-ms-transform: rotateX(0deg) rotateY(0deg););
-o-transform: rotateX(0deg) rotateY(0deg););
transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg);
-o-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
0% {-webkit-transform: rotateX(0deg) rotateY(0deg););
-ms-transform: rotateX(0deg) rotateY(0deg););
-o-transform: rotateX(0deg) rotateY(0deg););
transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg);
-o-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);}
}
/* Opera */
@-o-keyframes boxRotate
{
0% {-webkit-transform: rotateX(0deg) rotateY(0deg););
-ms-transform: rotateX(0deg) rotateY(0deg););
-o-transform: rotateX(0deg) rotateY(0deg););
transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
-ms-transform: rotateX(360deg) rotateY(360deg);
-o-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);}
}複製代碼
最後效果，大功告成！
文末
你是否是也實現了酷炫的css-3d效果呢？
歡迎踩踏github.com/BUPT-HJM/cs…，記得給star哦~~
也歡迎持續關注個人博客bupt-hjm.github.io/
參考
www.zhangxinxu.com/wordpress/2…
我也看了網上衆多文章/blog，學習了不少，因此也但願本身寫一篇給你們分享~謝謝閱讀。
可自由轉載、引用，但需署名做者且註明文章出處。
相關文章
- 1. 帶你玩轉css3的3D！
- 2. python帶你玩玩3D渲染
- 3. 帶你玩轉Github
- 4. 帶你玩轉Hibernate ! ! !
- 5. 帶你玩轉IDEA
- 6. 帶你玩轉Kubernetes
- 7. 手把手教你玩轉 CSS3 3D 技術
- 8. CSS3 3D轉換
- 9. css3 3D轉換
- 10. CSS3—3D翻轉
- 更多相關文章...
- • Hibernate的級聯與反轉 - Hibernate教程
- • XSLT - 轉換 - XSLT 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 帶你玩轉css3的3D！
- 2. python帶你玩玩3D渲染
- 3. 帶你玩轉Github
- 4. 帶你玩轉Hibernate ! ! !
- 5. 帶你玩轉IDEA
- 6. 帶你玩轉Kubernetes
- 7. 手把手教你玩轉 CSS3 3D 技術
- 8. CSS3 3D轉換
- 9. css3 3D轉換
- 10. CSS3—3D翻轉