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>        

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

 

（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>            

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

 

總結：

上面的示例代碼中注意幾個類名： 類名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>

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

 

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

　　用法：用於動畫子元素

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

 

（5）最后一點——變換坐標說明

　　下面盜圖一張

　　 

　　坐標系是相對的！相對的！相對的！

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

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

 

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