2. 程式人生 > >3D動畫立方體實現

3D動畫立方體實現

阿新 • • 發佈：2019-01-16

3D立方體解析

對於CSS3新增的屬性，我們覺得最炫酷的應該最屬於3D變換和2D變換以及動畫了吧！
下面我將自己對transform中rotate、translate的理解和大家分享一下！

3D座標演示

3D座標圖演示

值得注意的是：這個座標系和我們平時理解的不一樣，這裡的y軸向上方向是負的

而我們的z軸的方向其實就是我們面向瀏覽器的方向。假如我們的視角在紅色的正前方，那麼從紅色一層到紫色一層往裡面看的方向就是z軸的方向。
層疊

語法解釋

transform:rotateX(40deg);
//這句話解釋該元素繞X軸順時針旋轉40度
tranform:rotateY(40
 
deg);
//該元素繞y軸順時針旋轉40度
transform:rotateZ(-40deg);
//該元素繞z軸逆時針旋轉40度
transform:translateX(50px);
//該元素朝x軸的正方向（右）移動50畫素
transfrom:translateY(-50px);
//該元素朝y軸的負方向（上）移動50畫素
transform:translateZ(50px);
//該元素朝z軸的正方向（朝向我們）移動50畫素
transform:translateZ(-50px);
//該元素朝z軸負方向（往螢幕裡面）移動50畫素

下圖是以上程式碼的例項圖：

3D立方體分解圖

這裡運用到了perspective這個屬性，他的中文翻譯是“透視”的意思。
這裡寫圖片描述


這裡寫圖片描述
語法是：perspective:numbernumber越大，（我們的視角離影象越遠）也就是眼睛看影象的距離越遠。
這個屬性可以 設定在需要定義透視的元素上 也可以 設定在它的父元素上。
學過素描或者建築的同學比較好理解。

舉個栗子：也就是我們看遠方的山，我們站的遠處的時候會覺得這個山很小很矮，但是當但我們站在山下的時候，我們又會覺得這座山很大很高，其實他的大小並沒有改變。用一句成語來說就是“一葉障目不見泰山”。
同樣的，perspective-origin只有在設定了perspective屬性後才能夠有作用
perspective-origin的中文意思是“視角原點”，預設的是3D元素的中心。
語法是：perspective-origin: x y

; 這裡x，y是距離x軸和y軸的距離。

製作3D立方體

這裡寫圖片描述

第一步：書寫html結構

<div class="wrap">
        <div class="box">
            <div class="cube cube-1">前</div>
        </div>
        <div class="box">
            <div class="cube cube-2">後</div>
        </div>
        <div class="box">
            <div class="cube cube-3">左</div>
        </div>
        <div class="box">
            <div class="cube cube-4">右</div>
        </div>
        <div class="box">
            <div class="cube cube-5">上</div>
        </div>
        <div class="box">
            <div class="cube cube-6">下</div>
        </div>
    </div>

第二步：為html結構增加樣式

        div{box-sizing:border-box;}
        //為整個盒子設定3d視角，也就是我們看到的是一個3d的影象，而不是2d的
        .wrap{
            position: relative;
            transform-style: preserve-3d;
        }
        //參考盒子，也就是cube最原始的位置
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            border:1px dotted #178eee;
            margin: 100px;
            float: left;
        }
        .cube{
            position: absolute;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            width: 200px;
            height: 200px;
            background-color: #178eee;
            opacity: 0.6;
        }

為每個面設定樣式

我們可以分別對六個面進一 一設定
為了區分面，我們為每個面設定一個顏色！

對第一個面設定位置及角度（cube-1）前

.cube-1{
    background-color: coral;
    transfrom: perspective(1200px) translateZ(100px);
}

對第二個面設定位置及角度（cube-2）後

.cube-2{
    background-color: #ee33cc;
    transform:perspective(1200px) translateZ(-100px);
}

對第三個面設定位置及角度（cube-3）左

.cube-3{
    background-color: #33aadd;
    transform:perspective(1200px)  rotateY(-90deg) translateZ(100px);
}

對第四個面設定位置及角度（cube-4）右

.cube-4{
    background-color: #aadd44;
    transform:perspective(1200px)  rotateY(90deg) translateZ(100px);
}

對第五個面設定位置及角度（cube-5）上

.cube-5{
    background-color: #ee172c;
    transform:perspective(1200px)  rotateX(90deg) translateZ(100px);
}

對第六個面設定位置及角度（cube-6）上

.cube-6{
    background-color:#178eee;
    transform:perspective(1200px)  rotateX(-90deg) translateZ(100px);
}

最後將box盒子上的position:relative改成absolute，把所有3D元素上的perspective:(1200px)定義到父元素wrap上就可以實現立方體效果了。

注意！！！如果需要對一個元素進行連續的轉換（transform），那麼就設定在一個transform上，如果你同一元素上設定第二個transform屬性，那麼後面的就會覆蓋掉前一個。

這裡將視角定義在每個具體的元素上，是因為我們在目前操作旋轉的時候看到的是每個具體的元素，而不是看整體。最後我們將視角定義在父元素上，看到的就是整體的效果。

我們試一下將perspective:1200px設定在該元素的父元素上的效果是什麼？

下圖是定義在父元素的perspective屬性：定義一個視角，我們看到的就是整體，同一視角看過去本身是同樣大小同一個方向的元素，就會有偏差。
這裡寫圖片描述
下面是每一個元素都有自己的一個視角，那麼不管從哪個角度看過去，他都是那個樣子。
這裡寫圖片描述

做一個動畫效果！

@keyframes show{
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
    }
}
.wrap{
    animation: show 6s infinite;
}

把動畫引入到整個立方體上，我們的有動畫的3D立方體就完成了！
這裡寫圖片描述

最終實現程式碼

如下圖：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D立方體</title>
    <style>
    div{box-sizing: border-box;}
        .wrap{
            position: relative;
            transform-style: preserve-3d;
            margin: 400px;
            animation: show 6s infinite;
            perspective:(1200px);
        }
        .box{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .cube{
            position: absolute;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            width: 100%;
            height: 100%;
            background-color: #178eee;
            opacity: 0.6;
        }
        .cube-1{
            background-color: coral;
            transform:translateZ(100px);
        }
        .cube-2{
            background-color: #ee33cc;
            transform:translateZ(-100px);
        }
        .cube-3{
            background-color: #33aadd;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube-4{
            background-color: #aadd44;
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube-5{
            background-color: #ee172c;
            transform:rotateX(90deg) translateZ(100px);
        }
        .cube-6{
            transform:rotateX(-90deg) translateZ(100px);
        }
        @keyframes show{
            0%{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-100px);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-100px);
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">
            <div class="cube cube-1">前</div>
        </div>
        <div class="box">
            <div class="cube cube-2">後</div>
        </div>
        <div class="box">
            <div class="cube cube-3">左</div>
        </div>
        <div class="box">
            <div class="cube cube-4">右</div>
        </div>
        <div class="box">
            <div class="cube cube-5">上</div>
        </div>
        <div class="box">
            <div class="cube cube-6">下</div>
        </div>
    </div>
</body>
</html>

有興趣的小夥伴們，可以將它複製到自己的html文件中，看看效果哦！

相關推薦

3D動畫立方體實現

3D立方體解析 對於CSS3新增的屬性，我們覺得最炫酷的應該最屬於3D變換和2D變換以及動畫了吧！ 下面我將自己對transform中rotate、translate的理解和大家分享一下！ 3D座標演示 值得注意的是：這個座標系和我們平

CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼

等待 比例 需要 時間 span bottom translate abs ase CSS3中的3D動畫實現(鐘擺、魔方) CSS3的2D變形----傳統的transform變形效果 transform ： translate、scale、rotate、skew… tran

簡單css實現3d動畫效果

知識儲備 transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化 relative和absolute：相對定位和絕對定位 relative相對於原來文

3D動畫實現原理

        通過變換矩陣，我們可以實現大多數的動畫效果，不過這種方式，大多實現的是一種2D效果，如果向實現三維空間中的效果又什麼方法呢？     下面就為大家介紹Camera類，中文意思是攝像頭，當然這個指的可不是我們手機上那個照相用的那個攝像頭，這是一個邏輯概念，  

css3動畫效果：3 3D動畫

enter blog kit tag tez key container height gin 立方體旋轉動畫效果 css 1 #container{ 2 width: 400px; 3 height:

Android ListView動畫特效實現原理及源代碼

stat 每一個 應該 所有 ner haar .get tde pri Android 動畫分三種，當中屬性動畫為我們最經常使用動畫，且能滿足項目中開發差點兒所有需求，google官方包支持3.0+。我們能夠引用三方包nineoldandr

前端動畫效果實現的三種方式

near 動畫效果 timeout css屬性 轉移 動畫 sla 三種方式 內存 第一種，js中setTimeout和setintervel，把動畫元素設置position：absalute，然後操作left、top來移動。此種方法內存消耗大，顯示效果差，不推薦。 第二種

css3動畫的實現

data- res for ans 偏移 clas animation ani data css3動畫有哪些實現方式？Transitions 、transforms和 AnimationsTransitions特點：平滑的改變CSS的值transforms特點：變換主要實現

Fiori裏花瓣的動畫效果實現原理

png 隊列 view settime ges .com pop change 技術 Fiori裏的busy dialog有兩種表現形式，一種是下圖裏的花朵形狀，由5個不斷旋轉的花瓣組成。另一種是下圖的3/4個圓環不斷旋轉的效果。 關於前者的效果，可以看我制作的這個視頻。

WPF中3D旋轉的實現

css sca nba .com rac trac axis double wpf 原文:WPF中3D旋轉的實現 關於3D旋轉的原理，請看Daniel Lehenbauer的文章

3D動畫案例

要點： 1.視距越大，看到的效果越小，跟小孔成像同樣的原理 2.給父元素新增透視，會作用於子元素 3.backface-visibility設定背向瀏覽器是否可見 html： <!DOCTYPE html> <html lang="en"> <hea

CSS3之3D變形，實現大海波濤

animation:動畫名稱 花費時間 運動曲線 何時開始 播放次數 是否反方向; @keyframes 動畫名稱 { from{ 開始位置 } 0% to{ 結束 } 100% } 實現程式碼： <!DOCTYPE html> <html> <head&

網頁頁面預載入動畫的實現，載入後隱藏

我們做web app的時候，可以做一個頁面載入廣告，在你網頁載入的時候，先出現一段gif動圖或者是海報。 下面是實現頁面載入動畫的程式碼 首先js程式碼的實現 (function($){ $(window).load(function(){ $('#b

h5課件動畫如何實現？如何快速開發h5課件

最近幾年隨著h5的興起，複雜的h5動畫，甚至是互動動畫型別的產品不斷湧現，尤其在課件產品方面，很多公司都有相關需求，最近很多h5開發工程師想了解相關方面的技術。 針對h5,如果是簡單的動畫效果，可以考慮css3來實現，如果是較為複雜的動畫效果，比如有很多特效，動畫時長比較長，那麼就需要h5的動畫

h5互動課件動畫如何實現？如何快速開發h5互動課件動畫

最近幾年隨著h5的興起，複雜的h5動畫，甚至是互動動畫型別的產品不斷湧現，尤其在課件產品方面，很多公司都有相關需求，最近很多h5開發工程師想了解相關方面的技術。 針對h5,如果是簡單的動畫效果，可以考慮css3來實現，如果是較為複雜的動畫效果，比如有很多特效，動畫時長比較長，那麼就需要h5的動畫

安全看得見，阿里雲效能監控 ARMS 全真3D拓撲實現一“屏”瞭然

微服務架構下，各類服務之間存在著錯綜複雜的依賴關係。一旦業務出現問題，追查問題源頭就好比大海撈針，沒有頭緒。但業務不等人，此時，在最短的時間內定位問題根源是開發和運維人員對微服務監控產品的核心訴求。 傳統的監控產品提供了表格（table）、表單（form）和儀表盤（dashboard）三種展現形式，因其侷限

Android 幀動畫 的實現

文章目錄 1、幀動畫 2、檔案結構 3、activity_main.xml 檔案 4、frameanimation.xml 檔案 自定義的 動態檔案 5、ManiActivity 檔案

3D旋轉立方體

ora ext form gre query reserve transform true down <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <

荔枝派Licheepi nano裸機移植ZLG_GUI和3D旋轉立方體

   一：前言     以前申請到了荔枝派zero，在發了兩個開箱貼後就放在一邊吃灰了。後來又購買了荔枝派nano,刷了幾個教程中的系統之後又放到一邊吃灰了。雖然有屯板子的習慣，卻沒有使用板子的能力。     後來，經過斷斷續續的摸索和

示例React-router 路由切換動畫的實現

因為專案的需求，需要在路由切換的時候，加入一些比較 zb 的視覺效果，所以研究了一下。把這些學習的過程記錄下來，以便以後回顧。同時也希望這些內容能夠幫助一些跟我一樣的菜鳥，讓他們少走些坑。可能我對程式碼的表述不是很到位，希望大家不要介意。機智的你們一定可以看明白。 1.外掛依賴 使用的外掛是react-tr