社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > CSS3之3D變換實例詳解

CSS3之3D變換實例詳解

WBOY
發布： 2016-08-29 08:36:53
原創
1088 人瀏覽過

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

以下CSS代碼為了簡潔沒有添加前綴，請視情況自行添加（自動化時代推薦使用其他的一些方法，如gulp-autoprefixer插件，因為本人更喜歡gulp 還有

w3school上面的這句話早已經過時：  

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

可以透過

Can I use

網站查看各瀏覽器對此CSS3屬性的支援：

 

聽說現在流行先看效果和程式碼再解釋？

（1）效果一

 
 
HTML代碼：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='stage'</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='front'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='back'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>        </span>
登入後複製
View Code
CSS代碼：

<span style="font-size: 15px;"><span style="color: #800000;">.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 800px</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;
}<span style="color: #800000;">
.front</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">    
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159262h572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">    
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;        
}<span style="color: #800000;">
.stage:hover .container</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}</span>
登入後複製
View Code

 

（2）效果二

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

HTML代码：

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>帅气的胡歌<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>美腻的赵丽颖<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="stage"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>清纯的刘亦菲<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製
View Code

CSS代码：

<span style="color: #800000;">*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 2000px</span>;<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;
}<span style="color: #800000;">
.front</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translateZ(50px)</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.front img</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(90deg) translateZ(50px)</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
li:nth-child(1) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> skyblue</span>;
}<span style="color: #800000;">
li:nth-child(2) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;
}<span style="color: #800000;">
li:nth-child(3) .back</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
}<span style="color: #800000;">
.container:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-90deg)</span>;
}
登入後複製
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代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='stage'</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
登入後複製
View Code

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">.stage</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 800px</span>;
}<span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 140px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 1s</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;"> url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg')</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;"> cover</span>;
}<span style="color: #800000;">
.stage:hover .container</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}</span>
登入後複製
View Code

 

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

　　用法：用於動畫子元素

　　作用：3D透視下，預設是可以透過背面看到正面的內容（請參閱第三點的效果），可依需求設定為​​不可見。

 

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

　　下面盜圖一張

　　 

　　座標係是相對的！相對的！相對的！

　　座標系會跟著目前元素的變換而變換。

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

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

 

 

相關標籤：
CSS3之3D变换实例详解
來源：php.cn
上一篇：CSS屬性之float學習心得 下一篇：HTML 文字格式化實例
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2040
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2200
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1855
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1745
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1766
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板