社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
css3的3d起步
perspective
perspective-origin
transform-style
手把手帶你玩css3-3d
第一步：html結構
第二步： 加上必要的3D屬性，進入3D世界
第三步：加入必要的樣式
第四步：3D变换来袭
第五步：animation让3D动起来
首頁 web前端 css教學 玩CSS3的3D技術步驟圖解

玩CSS3的3D技術步驟圖解

高洛峰
高洛峰
Mar 19, 2017 pm 04:37 PM

css3的3d起步

要玩轉css3的3d，就必須了解幾個詞彙，便是透視(perspective)、旋轉(rotate)和移動(translate)。 透視即是以現實的視角來看螢幕上的2D事物，從而展現3D的效果。 旋轉則不再是2D平面上的旋轉，而是三維座標系的旋轉，就包含X軸，Y軸，Z軸旋轉。 平移同理。

當然用理論來說明，估計你還不明白。下面是3個gif：

  • 沿著X軸旋轉

  • 玩CSS3的3D技術步驟圖解

  • 沿著Y軸旋轉
    玩CSS3的3D技術步驟圖解

  • 沿著Z軸旋轉
    玩CSS3的3D技術步驟圖解

旋轉應該沒問題了，那要理解平移起來就比較容易了，就是在X軸、Y軸、z軸移動。

你可能會說透視比較不好理解，以下我介紹透視的幾個屬性。

perspective

perspective英文名便是透視，沒有這東西就沒辦法形成3D效果，但是這個東西是怎麼讓我們瀏覽器形成3D 效果的呢，可以看下面這張圖，其實學過繪畫的應該知道透視關係，而這裡就是這個道理。

玩CSS3的3D技術步驟圖解

但是在css裡它是有數值的，例如perspective: 1000px這個代表什麼呢？我們可以這樣理解，如果我們直接眼睛靠著物體看，物體就超大佔滿我們的視線，我們離它距離越來越大，它在變小，立體感也就出來了是不是，其實這個數值構造了一個我們眼睛離螢幕的距離，也就建構了一個虛擬3D假象。

perspective-origin

由上面我們了解了perspective，而加上了這個origin是什麼，我們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，我們的視點的不同位置就決定了我們看到的不同景象，默認是中心，為perspectice-origin: 50% 50% ,第一個數值是3D 元素所基於的X 軸，第二個定義在y 軸上的位置

當為元素定義perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。必須與 perspective 屬性一同使用，而且只影響 3D 轉換元素。 (W3school)

玩CSS3的3D技術步驟圖解

transform-style

perspective又來了，沒錯，它是css中3D的關鍵，transform-style預設是flat，如果你要在元素上視線3D效果的話，就必須用上transform-style: preserve -3d,否則就只是平面的變換，而不是3D的變換

手把手帶你玩css3-3d

以上我們稍微了解概念，下面就開始實戰吧！

我們看一個效果，是不是很酷炫~

玩CSS3的3D技術步驟圖解

#如果圖片載入不出來，就直接訪問https://bupt- hjm.github.io/css3-3d/，覺得可以的話記得給star咯hh

第一步：html結構

很簡單的一個容器包裹著一個裝了6個piece的piece-box

<p class="container">
    <p class="piece-box">
        <p class="piece piece-1"></p>
        <p class="piece piece-2"></p>
        <p class="piece piece-3"></p>
        <p class="piece piece-4"></p>
        <p class="piece piece-5"></p>
        <p class="piece piece-6"></p>
    </p>
</p>
登入後複製

第二步： 加上必要的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還沒開始

玩CSS3的3D技術步驟圖解

第四步：3D变换来袭

首先是实现走马灯，我们先不要让它走，先实现灯部分。

如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式rotateY，就变成如下

玩CSS3的3D技術步驟圖解
如何把他们从中心拉开呢？

这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下translateZ的值,而当translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

但是拉开的距离如何衡量？

玩CSS3的3D技術步驟圖解

是不是一目了然了~

下面我们再修改下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);
}
登入後複製

是不是已经实现了走马灯了？

玩CSS3的3D技術步驟圖解

第五步：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, 如下

<p class="container">
    <p class="piece-box">
        <p class="piece-box2"><!--新加的容器-->
            <p class="piece piece-1"></p>
            <p class="piece piece-2"></p>
            <p class="piece piece-3"></p>
            <p class="piece piece-4"></p>
            <p class="piece piece-5"></p>
            <p class="piece piece-6"></p>
        </p>
    </p>
</p>
登入後複製

在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

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);}
}
登入後複製

最后效果，大功告成！

以上是玩CSS3的3D技術步驟圖解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前 By DDD
藍王子：如何到達地下室
1 個月前 By DDD
北端：融合系統，解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
顯示更多
Related knowledge
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器 如何使用HTML，CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML，CSS和JavaScript中數據屬性的所有信息。

當您看上去時，CSS梯度變得更好 當您看上去時，CSS梯度變得更好 Apr 11, 2025 am 09:16 AM

我關注的一件事是Lea Verou＆＃039; s conic-Gradient（）Polyfill的功能列表是最後一項：

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時，Sass彙編發生在眼睛的眨眼中。感覺很棒，尤其是當它與browsersync配對時，它重新加載

靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語：“靜態表單提供商”。你帶上html

如何在WordPress主題中構建VUE組件 如何在WordPress主題中構建VUE組件 Apr 11, 2025 am 11:03 AM

內聯式模板指令使我們能夠將豐富的VUE組件構建為對現有WordPress標記的逐步增強。

php是A-OK用於模板 php是A-OK用於模板 Apr 11, 2025 am 11:04 AM

PHP模板通常會因促進Subpar代碼而變得不良說唱，但這並不是這樣的情況。讓我們看一下PHP項目如何執行基本的

三種代碼 三種代碼 Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時，我都會將我正在查看的代碼分為三種類型，或者如果您願意的話。我認為這些類型可以應用於

See all articles