CSS3之3D變換實例詳解

CSS3的3D效果很贊，本文實現簡單的兩種3D翻轉效果。首先看效果和源代碼，文末是文縐縐的總結部分^_^

如下CSS代碼爲了簡潔沒有添加前綴，請視狀況自行添加（自動化時代推薦使用其餘的一些方法，如gulp-autoprefixer插件，由於本人更喜歡gulp #_#）

還有w3school上面的這句話早已通過時：

 

目前爲止，現代瀏覽器基本都支持無前綴的3D變換的相關屬性（除了IE，以及Safari9的backface-visibility仍需加前綴-webkit，還有其餘瀏覽器的一些小問題）

能夠經過Can I use網站查看各瀏覽器對該CSS3屬性的支持狀況：

 

據說如今流行先看效果和代碼再解釋？

（1）效果一

 

 

HTML代碼：

<div class='stage'>
    <div class='container'>
        <div class='front'></div>
        <div class='back'></div>
    </div>
</div>        

View Code

CSS代碼：

.stage{ width: 140px; height: 200px; perspective: 800px;
} .container{ position: relative; width: 140px; height: 200px; transform-style: preserve-3d; transition: 1s;
} .front{ position: absolute; width: 140px; height: 200px; background-image: url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg'); background-size: cover; backface-visibility: hidden;
} .back{ position: absolute; width: 140px; height: 200px; background-image: url('http://d3.freep.cn/3tb_160824110159262h572240.jpg'); background-size: cover; transform: rotateY(180deg); backface-visibility: hidden;        
} .stage:hover .container{ transform: rotateY(180deg);
}

View Code

 

（2）效果二

效果連接：  http://codepen.io/FEwen/pen/kXOXpJ

HTML代碼：

<ul class="wrap">
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div>
            <p class="back">帥氣的胡歌</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div>
            <p class="back">美膩的趙麗穎</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div>
            <p class="back">清純的劉亦菲</p>
        </div>
    </li>
</ul>            

View Code

CSS代碼：

*{
    margin: 0;
    padding: 0;
}
.stage{
    width: 100px;
    height: 100px;
    perspective: 2000px;
    list-style: none;
}
.container{
     position: relative;
     width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 1s;
}
.front{
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translateZ(50px);
    backface-visibility: hidden;
}
.front img{
    width: 100%;
    height: 100%;
}
.back{
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    transform: rotateY(90deg) translateZ(50px);
    backface-visibility: hidden;
}
li:nth-child(1) .back{
    background-color: skyblue;
}
li:nth-child(2) .back{
    background-color: pink;
}
li:nth-child(3) .back{
    background-color: lightyellow;
}
.container:hover{
    transform: rotateY(-90deg);
}

View Code

 

總結：

上面的示例代碼中注意幾個類名： 類名stage代表舞臺元素，類名container代表父容器，還有container裏面的變換子元素。

這是標準的嵌套3D變換結構：

　　舞臺（perspective,perspective-origin）

　　　　父容器（transform-style: preserve3d）（各類變換）

　　　　　　子元素（各類變換）

　　　　　　子元素（各類變換）

　　　　　　子元素（各類變換）

　　　　　　　...

 

還有無嵌套的3D變換結構：

　　舞臺（perspective,perspective-origin）

　　　　子元素（各類變換）

　　　　子元素（各類變換）

　　　　子元素（各類變換）

　　　　　　　...

能夠先看上方結構有個直觀的認識，下面詳細講解。

 

CSS3變換主要的屬性以下：

（1）perspective（參考以上類名stage中的使用）

　　用法：應用於舞臺元素，爲元素定義perspective屬性時，其子元素會得到透視效果。

　　做用：定義3D 元素距視圖的距離（視距），單位是像素。能夠理解爲距物體多遠進行觀察，所以這個值越小，距離元素物體更近，3D效果越明顯；該值越大，距離元素物體越遠，3D效果越不明顯，由於遠遠看的只見一坨東西。

　　注意：在實際應用中，能夠經過設置多個舞臺元素，使子元素的變換相對於各自的舞臺實現，那麼每個舞臺下的元素變換所產生的視覺效果都是一致的（參考我上面的第二個例子）。

 

（2）perspective-origin（參考以上類名stage中的使用）

　　用法：應用於舞臺元素，與perspective配合使用，子元素會得到透視效果

　　做用：能夠理解爲眼睛所看的位置，默認舞臺中心點

　　注意：幾種設置方法，如

　　　　perspective-origin: 0px 100px; （使用具體數值）

　　　　perspective-origin: 0% 50%;　 （使用百分比）

　　　　perspective-origin: left center;  （共3種： left/center/right）

 

（3）transform-style: preserve-3d（參考以上類名container中的使用）

　　用法：用於動畫子元素的父元素，也就是容器

　　做用：具備兩個做用，首先使子元素具備透視效果，其次使子元素保留父元素的3D位置。

　　注意：這個屬性究竟有什麼用？和perspective有什麼干係？

　　　　　——該屬性是爲了嵌套3D元素而使用的！perspective和transform-style各自使得子元素具備3D透視效果，而且transform-style:preserve-3d使子元素保留父元素的3D位置，簡單來講就是嵌套。若是不須要嵌套3D元素，就不須要這個屬性。看下面的例子：

　　效果：

　　HTML代碼：

<div class='stage'>
    <div class='container'></div>
</div>

View Code

　　CSS代碼：

.stage{ width: 140px; height: 200px; perspective: 800px;
} .container{ width: 140px; height: 200px; transition: 1s; background-image: url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg'); background-size: cover;
} .stage:hover .container{ transform: rotateY(180deg);
}

View Code

 

（4）backface-visibility: hidden（參考以上作3D變換的子元素中的使用）

　　用法：用於動畫子元素

　　做用：3D透視下，默認是能夠透過背面看到正面的內容（參見第三點的效果），可根據須要設置爲不可見。

 

（5）最後一點——變換座標說明

　　下面盜圖一張

　　 

　　座標系是相對的！相對的！相對的！

　　座標系會跟着當前元素的變換而變換。

　　例如當前div應用了rotateY(60deg)，那麼整個座標系也會跟着rotateY(60deg)，所以對這個div使用translateZ()始終是和正面垂直的方向。

 

（6）Last but not least，祝開心愉悅每一天，若是發現我有任何錯誤的地方，請狠狠地告訴我吧！