社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > css3怎麼達到3d翻轉效果

css3怎麼達到3d翻轉效果

青灯夜游
發布： 2023-01-05 16:10:28
原創
7337 人瀏覽過

在css3中，可以使用transform屬性來配合rotateY()、rotateX()等3d旋轉函數來實現3d翻轉效果。 rotateX()可以使元素繞其X軸旋轉給定角度，rotateY()可以使元素繞其Y軸旋轉給定角度。

css3怎麼達到3d翻轉效果

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、實作一張圖片的翻轉

1、HTML結構

<div class="stage">
    <div class="flipBox">
        <figure class="pic front">Front</figure>
        <figure class="pic back">Back</figure>
    </div>
</div>
登入後複製

上述HTML的結構是：

  • p.stage規定了一個3D舞台，基本上所有使用CSS3 3D變換的實作都會這麼做，規定perspective樣式從而達到透視效果
    • ##p.flipBox是真正實現翻面的容器，稍後將對它進行3D變換
  • figure代表兩張圖片，一張是正面，一張是背面
想法是：將figure.front和figure.back作為翻轉圖片的正反面。圖片翻轉後，figure.back將變成面對使用者的那一面，figure.front將背對使用者。

初始狀態下figure.back是水平翻轉過的（即transform: rotateY(180deg)），這樣圖片翻轉後背面的文字將正著顯示（否則翻轉過來以後背面的文字是倒著的——因為反轉之前是正著的嘛~）。


3、CSS結構

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}
登入後複製

現在分析每個元素的CSS：

body,figure {
    margin: 0;
    padding: 0;
}
登入後複製

沒什麼好說的，去掉內外邊距！ 

.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
登入後複製

為3D舞台定義樣式。 margin是為了距離瀏覽器左邊和上邊有一些距離，讓變換顯示的更完整。 perspective規定了3D元素與攝影機（或人眼）的距離，數值越小3D元素離人眼越近，數值越大3D元素離人眼越遠。 

.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
登入後複製

為翻轉盒子定義樣式。這個元素是真正進行3D變換的元素。其position屬性是為其兩個子figure元素創造定位點，以便兩個子figure元素定位到p.flipBox的左上角實現兩張圖片的對齊。 transform-style屬性是必須的，這規定了p.flipBox元素的後代元素是以哪種形式進行3D變換（preserve-3d表示後代元素任然以3d的模式進行變換；另一個值flat表示只對p .flipBox進行3D變換，後代元素則只是p.flipBox平面中的內容，不進行3D變換），這和After Effect中的偽3D十分相似。 transition規定只變換transform屬性，時間為1s.

.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
登入後複製

為兩張圖片（這裡的兩個figure）規定統一的樣式。使用絕對定位，定位到p.flipBox的左上角，而兩個figure的大小又是一樣的，所以完美重疊。 backface-visibility是一個重要的屬性，它規定背對使用者的3D元素是否顯示，這裡應該規定為不顯示（hidden），否則不該顯示背面的時候背面會顯示出來。例如初始狀態，顯然不應該顯示figure.back，但又因為figure.back是後渲染的，所以會覆蓋在figure.front上，我們之前為figure.back規定了transform: rotateY(180deg)，所以figure. front是背對使用者的，將不顯示。再例如翻轉過後，figure.front會擋在figure.back前面，不過此時figure.front將會背對用戶，所以被backface-visibility隱藏了，這正是我們想要的。 

.front {
    background: #f00;
}
登入後複製

規定了圖片正面為紅色。 

.back {
    background: #090;
    transform: rotateY(180deg);
}
登入後複製

規定了圖片背面為綠色，同時，transform: rotateY(180deg)規定在初始狀態，figure.back是水平翻轉180°的。


3、開始旋轉圖片

.stage:hover .flipBox {
 transform: rotateY(-180deg);
}
登入後複製

當滑鼠移入3D舞台時，將p.flipBox旋轉-180°，實現圖片翻轉效果。這裡讓p.flipBox旋轉 180°也是可以的，但旋轉的方向不同罷了。


css3怎麼達到3d翻轉效果

二、案例

#1、圖片準備

為減少HTTP請求，這裡使用精靈圖。


css3怎麼達到3d翻轉效果 圖片大小為200*200，分上下兩部分，上方為翻轉圖片的正面（黑白），下方為翻轉圖片的背面（彩色）。上方和下方的logo都經過水平居中和垂直居中，以確保翻轉前後logo位置一致。

2、程式碼實作

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Study</title>
    <style>
        html,body,ul,li,a,figure,h4 {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        h4 {
            display: none;
        }
        .Stage {
            width: 604px;
            height: 203px;
            margin: 50px;
            border-left: 1px solid #f5f5f5;
            border-top: 1px solid #f5f5f5;
            perspective: 10000px;
        }
        .trigger {
            display: block;
            float: left;
            width: 200px;
            height:100px;
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            position: relative;
        }
        .flipBox {
            display: block;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1.2s;
            transition-delay: 0.03s;
        }
        .trigger:hover .flipBox {
            transform: perspective(10000px) rotateY(-180deg);    /*这里的perspective为每个flipBox规定单独的视点距离，解决Chrome中统一视点的问题*/
        }
        .plane {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back {
            transform: rotateY(180deg);
        }
        .logo1 figure.front {
            background: url("pic.png") center 0 no-repeat;
        }
        .logo2 figure.front {
            background: url("pic_2.png") center 0 no-repeat;
        }
        .logo3 figure.front {
            background: url("pic_3.png") center 0 no-repeat;
        }
        .logo4 figure.front {
            background: url("pic_4.png") center 0 no-repeat;
        }
        .logo5 figure.front {
            background: url("pic_5.png") center 0 no-repeat;
        }
        .logo6 figure.front {
            background: url("pic_6.png") center 0 no-repeat;
        }
        .logo1 figure.back {
            background: url("pic.png") center -100px no-repeat;
        }
        .logo2 figure.back {
            background: url("pic_2.png") center -100px no-repeat;
        }
        .logo3 figure.back {
            background: url("pic_3.png") center -100px no-repeat;
        }
        .logo4 figure.back {
            background: url("pic_4.png") center -100px no-repeat;
        }
        .logo5 figure.back {
            background: url("pic_5.png") center -100px no-repeat;
        }
        .logo6 figure.back {
            background: url("pic_6.png") center -100px no-repeat;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a class="flipBox logo1" href="#">
                <h4>Fun Games</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo2" href="#">
                <h4>Man Style</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo3" href="#">
                <h4>Sims.</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo4" href="#">
                <h4>Googla</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo5" href="#">
                <h4>JavaScript</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo6" href="#">
                <h4>Felix</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
登入後複製

css3怎麼達到3d翻轉效果
css3怎麼達到3d翻轉效果

#（學習影片分享：

css影片教學）

以上是css3怎麼達到3d翻轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
3d旋轉 css transform
來源：php.cn
上一篇：css如何實現滑鼠經過樣式改變 下一篇：css如何設定內邊距
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1335
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板