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

jopen 8年前發布 | 16K 次閱讀 HTML5 前端技術

轉載請標明出處：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 ，然后將背景重復顯示，效果如下（我添加了邊框）：

現在的完整效果：

可以看到立方體已經成型了，最后添加上動畫就行了，不要覺得動畫很復雜，其實很簡單~

定義一個動畫幀：

@-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這個偽元素，然后設置徑向漸變~~現在終于一致了~

源碼點擊下載

來自： http://blog.csdn.net//lmj623565791/article/details/34120047

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452954689917.html

HTML5 前端技術