HTML5 CSS3 誘人的例項： 3D立方體旋轉動畫

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

創意來自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ，同學給我發的例子，感覺很不錯，不過實在想不出來實際的用處，但是效果很炫~

效果圖：

知識點：

1、perspective ，transform 的複習

2、css3 backgroud實現格格背景，即面上的小格格

3、 @-webkit-keyframes 實現動畫

HTML：

<body>


<div class="stage">
    <div class="cube">
        <div class="font"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>

</div>


</body>

前面的3D商品展示中已經說過如何製作正方體，並且那個上面還有數字，理論上說比這個複雜，雖然木有這個炫~這裡就不多說了。

CSS：

 html
        {
            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
            height: 100%;
        }

        .stage
        {
            -webkit-perspective: 1000px;
            width: 20em;
            height: 20em;
            left: 50%;
            top: 50%;
            margin-left: -10em;
            margin-top: -10em;
            position: absolute;
        }

        .cube
        {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        .cube *
        {
            background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
            -webkit-background-size: 2.5em 2.5em;

            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(54, 226, 248, 0.5);
            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);

        }

        .font
        {
            -webkit-transform: translateZ(10em);
        }

        .back
        {
            -webkit-transform: rotateX(180deg) translateZ(10em);
        }

        .left
        {
            -webkit-transform: rotateY(-90deg) translateZ(10em);
        }

        .right
        {
            -webkit-transform: rotateY(90deg) translateZ(10em);
        }

        .top
        {
            -webkit-transform: rotateX(90deg) translateZ(10em);
        }

        .bottom
        {
            -webkit-transform: rotateX(-90deg) translateZ(10em);
        }

同樣：stage作為舞臺，cube設定子元素的效果為3d，然後每個面都進行旋轉和設定translateZ然後形成立方體。

為每個面設定backgroud設定小格格的程式碼：

     background: -webkit-linear-gradient(
                left,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px),
                        -webkit-linear-gradient(
                top,
                rgba(54, 226, 248, 0.5) 0px,
                rgba(54, 226, 248, 0.5) 3px,
                rgba(0, 0, 0, 0) 0px);

            -webkit-background-size: 2.5em 2.5em;

背景設定，從左到右的3畫素的條條，從上到下的3畫素的條條；然後設定背景大小為2.5em 2.5em ，然後將背景重複顯示，效果如下（我添加了邊框）：

現在的完整效果：

可以看到立方體已經成型了，最後新增上動畫就行了，不要覺得動畫很複雜，其實很簡單~

定義一個動畫幀：

 @-webkit-keyframes spin
        {
            from
            {
                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }

            to
            {
                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }

名字為spin，開始時 translateZ(-10em) rotateX(0) rotateY(0deg); 結束時： translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同時繞著x,y軸360度旋轉。

最後給我們的立方體加上此animation屬性：

  .cube
        {
            -webkit-animation: 6s spin linear infinite;
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

設定時間為動畫時間 6s , 動畫 spin , 速度為勻速linear , 無限迴圈 infinite ；

關於更加細緻的引數設定，可以參考w3cSchool~以後我也會寫單獨介紹CSS3的屬性的部落格~

好了，最終的效果就已經完成了~

對於原網站的樣子，有點細微的差別：

因為它額外給每個面添加了一個徑向漸變，那麼我們新增上：

    .cube *:before
        {
            display: block;
            background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
        }

利用before這個偽元素，然後設定徑向漸變~~現在終於一致了~

HTML5 CSS3 誘人的例項： 3D立方體旋轉動畫

創意來自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ，同學給我發的例子，感覺很不錯，不過實在想不出來實際的用處，但是效果很炫~效果圖：知識點：1、perspective ，transform 的複習2、

HTML5 CSS3 誘人的實例： 3D立方體旋轉動畫

nim tom gravity order img fin 多說 line html 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/34120047創意來自：http://www.html5trick

HTML5 CSS3 誘人的例項：模仿優酷視訊截圖功能

一般的視訊站點對於使用者上傳的視訊，在使用者上傳完畢後。能夠對播放的視訊進行截圖，然後作為視訊的展示圖。專案中也能夠引入這種功能給使用者一種不錯的體驗。而不是讓使用者額外上傳一張展示圖。效果圖：看起來還是非常不錯，以下我給大家分析下，極其核心程式碼非常easy

HTML5 CSS3 誘人的例項 canvas 模擬實現電子彩票刮刮樂

今天給大家帶來一個刮刮樂的小例子~基於HTML5 canvas的，有興趣的可以改成android版本的，或者其他的~效果圖：貼一張我中500w的照片，咋辦啊，怎麼花呢~好了，下面開始原理：1、刮獎區域兩個Canvas，一個是front ，一個back ，front遮蓋住下面的

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d; 格式：舞臺(perspective) 容器(3D, preserve-3d) 內容 3D實現立方體盒子： transform的4

HTML5 CSS3 經典案例：無外掛拖拽上傳圖片（支援預覽與批量）（一）

上傳基本是專案中經常出現的，一般採用：1、form提交 2、flash3、html5form提交會重新整理頁面，很難做到非同步上傳；flash可能是用得比較多了，因為可以兼顧到幾乎所有的瀏覽器，我之前一直會用jquery的uploadify作為專案中的上傳工具，uploadi

HTML5 CSS3 經典案例：無外掛拖拽上傳圖片（支援預覽與批量）（二）

效果圖1：效果圖2：好了，請允許我把圖片貼了兩遍，方便大家看效果了~可以看出我們的圖片的li的html其實還是挺複雜的，於是我把html文件做了一些修改：<span style="font-size:12px;"><body> <div id="uploadBox"> &

HTML5 CSS3 專題：誘人的例項 3D旋轉木馬效果相簿

首先說明一下創意的出處：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（張鑫旭的部落格），對前臺感興趣的可以沒事去看看他的部落格，很給力~這篇部落格的目的是因為上篇HTML5 CSS3專題

第102天：CSS3實現立方體旋轉

right https mes abs absolute 變換 class type auto CSS3實現立方體旋轉 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 &l

Css3 3D立方體盒子小例項

程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D立體小例項</title> <style> *{

HTML5+CSS3立方體3D翻轉效果

1、呼叫CSS樣式： <link rel="stylesheet" type="text/css" href="css/style.css" /> 2、呼叫JS外掛程式碼： <script src="js/prefixfree.min.js"></script> 3、新增

純CSS3實現一個旋轉的3D立方體盒子

簡介上網易前端微專業課程，裡面有一個課外作業是實現一個3D旋轉立方體，花了點時間做了下，還有點意思，寫個簡單教程，供大家學習。先放上最終要實現的效果注：程式碼在chrome 43.0.2357.124 m正常，其他瀏覽器未測試步驟 1.

CSS3動畫程式碼---立方體旋轉

第一部分：CSS <style type="text/css"> .main{ &

Html5 canvas學習5-圖形變形：縮放旋轉平移變形

在canvas對當前繪圖物件進行變形時，其中心點是畫布(0,0)的座標原點。 1.縮放縮放context.scale(x,y) x:x座標軸按x比例縮放 y:y座標軸按y比例縮放比如1表示不縮放、0.5表示縮小50%、2.3表示放大2.3倍。 &nbs

HTML5 3D旋轉動畫案例

.container{ width: 200px; height: 200px; position: relative; margin:50px auto; transform: rotateY(15deg) rotateX(-15deg); transform-st

實現CSS3 3D圍繞旋轉

本案例主要使用了CSS3中的變換transform和動畫animation屬性，實現了跑馬燈效果，詳細的解釋在程式碼中的註釋中。 <!DOCTYPE html> <html> <head> <meta charset="UTF

[轉載]HTML5+CSS3的響應式網頁設計：自動適應螢幕寬度

一、”自適應網頁設計”的概念二、允許網頁寬度自動調整 “自適應網頁設計”到底是怎麼做到的？其實並不難。首先，在網頁程式碼的頭部，加入一行viewport元標籤。 <meta name=”viewport” content=”width=device-

html5學習筆記三：canvas中平移，縮放，旋轉等影象變換問題

1，儲存與恢復問題關鍵字：save / restore save指儲存save之前的canvas狀態，restore恢復save儲存的canvas狀態。舉個例子我想在canvas中隔一秒顯示一個圖片，那我可以先用save指令儲存空白的canvas，然後在顯示一張圖片之後r

07. Web大前端時代之：HTML5+CSS3入門系列~H5 地理位置

定位型別 IP 定位優點任何位置都可用在伺服器端處理缺點不精確，一般精確到城市運算代價大，可能出錯代理的時候就可能定位出錯了 GPS定位優點定位精準缺點定位時間長，耗電量大室內效果不好需要硬體裝置支援

01.Web大前端時代之：HTML5+CSS3入門系列~初識HTML5

文件申明  <!DOCTYPE html> 字元編碼（UTF-8）  <meta charset="utf-8"

HTML5 CSS3 誘人的例項： 3D立方體旋轉動畫

相關推薦