如何制作css3的3d動畫——以骰子旋轉為例，詳解css3動畫屬性

本文轉載自查看原文 2016-06-01 12:18 7372 3D動畫/ CSS3

首先先來看兩個用css3實現的炫酷的3d動畫效果

你沒看錯，這個炫酷的效果都是用css3實現的。

下面是動畫實現所需要用到的幾個css3屬性。

1、perspective：用來實現一個3d的場景

寫3D效果的第一步是要創建一個3D場景，即索要實現效果的模塊。這里用到了 perspective 屬性和 perspective-origin 屬性。

perspective：用來定義3d動畫距離瀏覽器的距離，單位是（px）。
perspective-origin：效果渲染的視角，告訴瀏覽器我們觀看的角度，一般為 center 或 50% 50%，意為居中。
transform-style：preserve-3d 來告訴瀏覽器之后要進行的transform的操作都是對一個3D的世界進行的。

2、transition：用來寫動畫的過度效果

transition 用來實現過度的效果，使動畫不至於太過生硬。這是一個復合屬性，分別有以下幾個屬性：

transition-property：過度或動態模擬的css屬性，對應的屬性有：寬度（width）、高度（height）、邊框（border）、絕對定位的上下左右值、外邊距（margin）、內邊距（padding）、文字陰影（text-shadow）、z-index等。
transition-duration：完成過度所需的時間
transition-timing-function：指定過度函數，函數包括 ease（默認值，速度由快到慢，主見變慢）、linear（勻速）、ease-in（速度越來越快，加速，漸顯效果）、ease-out（速度越來越慢，減速，漸隱效果）、ease-in-out（先加速，再減速，漸顯漸隱效果）
transition-delay：指定開始出現的延遲時間，即過渡效果開始執行的時間。

3、transform：用來實現翻轉、角度的轉換

transform 同樣是個復合屬性，用來實現各種轉換效果，分別有以下幾個屬性：

translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX/Y/Z 定義轉換，分貝用 X、Y、Z 軸的值。
scale(x,y) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX/Y/Z 通過設置 X、Y、Z 軸的值來定義縮放轉換，若為Z軸，則定義的是3D旋轉。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX/Y 定義沿着 X、Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖

下面介紹下一個簡單的骰子的寫法

1、創建一個3D場景

這里使用了perspective 和perspective-origin 兩個屬性，定義了3D動畫的距離是800px，居中顯示的。這里借用一張慕課網的圖片，來查看這兩個屬性的確切含義。
我們在3D場景里面定義了一個類名為dice的div，這里是我們寫這個骰子的外層包裹的div，我們給他定義好寬和高，並讓他居中顯示。
骰子的六個面我們分別用六個div（其他塊級元素也可以）來實現，會用到定位，我們這里給.dice 定義為相對定位。
我們給我們這個骰子的包裹div，加上了transform-style: preserve-3d這個樣式，是要告訴瀏覽器之后要進行的transform的操作都是對一個3D的世界進行的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>實現一個3D骰子</title>
    <style>
    *{
        padding: 0;
        margin: 0;        
    }
    .block{
        border: 1px solid #000;
         padding: 100px 0;
        -webkit-perspective: 800px;
           -moz-perspective: 800px;
                perspective: 800px;
        -webkit-perspective-orign: 50% 50%;
           -moz-perspective-orign: 50% 50%;
                perspective-orign: 50% 50%;
    }
    .dice{
        width: 300px;
        height: 300px;
        margin: 20px auto;
        position: relative;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;
    }
    <style>
</head>
<body>
    <div class="block">
        <div class="dice">
        </div>
    </div>
</body>
</html>

2、場景布置好了，下面來寫骰子的六個面

html 為6個相同的div

<div class="block">
    <div class="dice">
        <div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
    </div>
</div>

定義公共的樣式

.page{
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.3);
    position: absolute;
    font-size: 200px;
    color: #fff;
    line-height: 200px;
    text-align: center;
    border: 1px solid red;
}

這時我們看到的是一個6個div重疊的塊，如下圖；

下面是關鍵的一步，我們來給每個面定義不同的位置，實現一個正方體的結構。

3、給骰子的六個面定義位置

#page2{
        -webkit-transform: rotateY(-90deg);
           -moz-transform: rotateY(-90deg);
            -ms-transform: rotateY(-90deg);
             -o-transform: rotateY(-90deg);
                transform: rotateY(-90deg);
        -webkit-transform-origin: right;
           -moz-transform-origin: right;
            -ms-transform-origin: right;
             -o-transform-origin: right;
                transform-origin: right;
    }
    #page3{
        -webkit-transform: translateZ(-200px);
           -moz-transform: translateZ(-200px);
            -ms-transform: translateZ(-200px);
             -o-transform: translateZ(-200px);
                transform: translateZ(-200px);
        -webkit-transform-origin: right;
           -moz-transform-origin: right;
            -ms-transform-origin: right;
             -o-transform-origin: right;
    }
    #page4{
        -webkit-transform: rotateY(90deg);
           -moz-transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
             -o-transform: rotateY(90deg);
                transform: rotateY(90deg);
        -webkit-transform-origin: left;
           -moz-transform-origin: left;
            -ms-transform-origin: left;
             -o-transform-origin: left;
    }
    #page5{
        -webkit-transform: rotateX(-90deg);
           -moz-transform: rotateX(-90deg);
            -ms-transform: rotateX(-90deg);
             -o-transform: rotateX(-90deg);
                transform: rotateX(-90deg);
        -webkit-transform-origin: top;
           -moz-transform-origin: top;
            -ms-transform-origin: top;
             -o-transform-origin: top;
    }
    #page6{
        -webkit-transform: rotateX(90deg);
           -moz-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
             -o-transform: rotateX(90deg);
                transform: rotateX(90deg);
        -webkit-transform-origin: bottom;
           -moz-transform-origin: bottom;
            -ms-transform-origin: bottom;
             -o-transform-origin: bottom;       
    }

這里用到了transform的兩個屬性 rotate 和 origin，前者是定義旋轉角度，后者是定義旋轉的軸。

按照上述代碼來寫，我們現在已經可以看見一個正方體了，如圖：

現在已經實現了一大部分代碼的書寫了，我們已經寫出了一個靜態的正方體，接下來讓他實現一個轉起來的動畫就可以了。

下面是動畫的部分，實現讓這個正方體以隨機的角度轉動起來。　

用css3來書寫動畫

css3里面另一強大的屬性就是動畫的實現，省去了很多的js代碼的計算一級各種動畫效果的考慮，擁有css3神器，就可以寫出各種炫酷的效果來，趕緊來看看怎么實現。

1、如何旋轉

上面我們講過了他過transform的rotate屬性來實現旋轉，我們通過對每個面的旋轉實現了一個正方體的樣子，這里我們把正方體作為一個整體，來實現一整個正方體的旋轉。

2、定義動畫：

css3 里面寫動畫分為兩步，第一步就是來定義一個動畫。通過 @keyframes 來實現。

語法如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：動畫的名字（盡量語意化）
keyframes-selector：動畫時長的百分比。0%-100%（或from、to）
css-styles：一個或多個合法的 CSS 樣式屬性

我們這里歹意一個名為 random-rotate 的動畫，通過transform的rotate屬性來實現旋轉。代碼如下：

@-webkit-keyframes random-rotate{
    0%{
        -webkit-transform:rotateX(0deg) rotateY(0deg);
           -moz-transform:rotateX(0deg) rotateY(0deg);
             -o-transform:rotateX(0deg) rotateY(0deg);
                transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        -webkit-transform:rotateX(360deg) rotateY(360deg);
           -moz-transform:rotateX(360deg) rotateY(360deg);
             -o-transform:rotateX(360deg) rotateY(360deg);
                transform:rotateX(360deg) rotateY(360deg);
    }
}
@-moz-keyframes random-rotate{
    0%{
        -webkit-transform:rotateX(0deg) rotateY(0deg);
           -moz-transform:rotateX(0deg) rotateY(0deg);
             -o-transform:rotateX(0deg) rotateY(0deg);
                transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        -webkit-transform:rotateX(360deg) rotateY(360deg);
           -moz-transform:rotateX(360deg) rotateY(360deg);
             -o-transform:rotateX(360deg) rotateY(360deg);
                transform:rotateX(360deg) rotateY(360deg);
    }
}
@-o-keyframes random-rotate{
     0%{
        -webkit-transform:rotateX(0deg) rotateY(0deg);
           -moz-transform:rotateX(0deg) rotateY(0deg);
             -o-transform:rotateX(0deg) rotateY(0deg);
                transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        -webkit-transform:rotateX(360deg) rotateY(360deg);
           -moz-transform:rotateX(360deg) rotateY(360deg);
             -o-transform:rotateX(360deg) rotateY(360deg);
                transform:rotateX(360deg) rotateY(360deg);
    }
}
@keyframes random-rotate{
     0%{
        -webkit-transform:rotateX(0deg) rotateY(0deg);
           -moz-transform:rotateX(0deg) rotateY(0deg);
             -o-transform:rotateX(0deg) rotateY(0deg);
                transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        -webkit-transform:rotateX(360deg) rotateY(360deg);
           -moz-transform:rotateX(360deg) rotateY(360deg);
             -o-transform:rotateX(360deg) rotateY(360deg);
                transform:rotateX(360deg) rotateY(360deg);
    }
}

這里我們要這個動畫x、y軸分別從0度轉到 360度。

3、動畫的實現

css3 里面的animation 配合 @keyframe 來實現。 animation 是一個復合屬性，同樣我們來看下這個復合屬性的各個屬性是如何定義的。

animation-name：動畫的名字（@keyframe 定義好的）
animation-duration：動畫執行一次的時間
animation-timing-function：動畫的速度曲線（ease、linear等，等同於transform的速度曲線用法）
animation-delay：動畫的延時時間
animation-interation-count：動畫播放的次數（數字/infinite 無限次）
animation-direction：動畫播放的方向（normal 正常/alternate 反向）
animation-play-state：動畫播放狀態（running 播放/paused 暫停）
animation-fill-mode：動畫在開始和結束后發生的操作

下面來寫下代碼，我們這里讓這個正方體無限轉動，每次動畫的時間為5s，速度為勻速，動畫不延時。同時我們給動畫添加一個過度的效果，使動畫看起來更平滑。

外層div樣式改為如下：

.dice{
    width: 300px;
    height: 300px;
    margin: 20px auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;
    -webkit-animation: random-rotate 5s linear 0s infinite;
       -moz-animation: random-rotate 5s linear 0s infinite;
        -ms-animation: random-rotate 5s linear 0s infinite;
         -o-animation: random-rotate 5s linear 0s infinite;
              animation: random-rotate 5s linear 0s infinite;
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}

至此，我們已經完整的實現了一個正方體（類似於一個骰子）的旋轉，有幾點需要注意的提示如下：

1、由於個瀏覽器對css3的實現不同，記得加瀏覽器前綴名
2、css3動畫確實很炫，但還是要根據項目的不同來進行取舍
3、css3可以實現的動畫還很多，大家可以多開開腦洞，來實現屬於你的css3動畫
4、每個動畫有自己的用途，使用時不要混淆

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3實現3D球體旋轉動畫 css3制作旋轉動畫用CSS3做3D動畫的那些事 css3旋轉、過渡、動畫屬性 css3動畫屬性有哪些 CSS3制作動畫的三個屬性 Css3動畫（一）如何畫3D旋轉效果或者衛星圍繞旋轉效果 css3動畫之圖片旋轉 css3學習--css3動畫詳解一(animation屬性） CSS3動畫相關屬性詳解