HTML5 CSS3 誘人的執行個體: 3D立方體旋轉動畫

來源:互聯網
上載者:User

標籤:css3   art   blank   邊框   ado   技術   相同   理論   知識   

轉載請標明出處:http://blog.csdn.net/lmj623565791/article/details/34120047

創意來自: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 。然後將背景反覆顯示。效果例如以下(我加入了邊框):



如今的完整效果:


能夠看到立方體已經成型了,最後加入上動畫即可了,不要認為動畫非常複雜,事實上非常easy~

定義一個動畫幀:

 @-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立方體旋轉動畫

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.