1. 程式人生 > >HTML5 CSS3 誘人的例項: 3D立方體旋轉動畫

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

創意來自: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遮蓋住下面的

基於css33D立方體旋轉特效 (先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

文件申明 <!--文件型別申明,html代表是html5的文件型別--> <!DOCTYPE html> 字元編碼(UTF-8) <!--字元編碼,charset="utf-8"--> <meta charset="utf-8"