3D立體效果_ZenDei技術網路在線

3D立體效果

-Advertisement-

效果圖看左上角代碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基於CSS3的3D立方體旋轉動畫</title> <style> /* 3d旋轉樣式 */ .cub { width: 2.5rem; height: ...

效果圖看左上角

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基於CSS3的3D立方體旋轉動畫</title>
        <style>
            /* 3d旋轉樣式 */
            .cub {
                width: 2.5rem;
                height: 2.5rem;
                position: fixed;
                left: 3%;
                top: 3.75rem;
            }

            #cube {
                animation: 6s spin linear infinite;
                height: 100%;
                position: absolute;
                transform-style: preserve-3d;
                width: 100%;
            }

            #cube * {
                display: block;
                height: 2.5rem;
                position: absolute;
                width: 2.5rem;
                cursor: pointer;
            }

            .cub:hover {
                width: 6.25rem;
                height: 6.25rem;
            }

            .cub:hover #cube * {
                width: 6.25rem;
                height: 6.25rem;
            }

            #cube *:before {
                content: '';
                height: 100%;
                position: absolute;
                width: 100%;
            }

            .cub:hover #back {
                transform: rotateX(180deg) translateZ(5rem);
            }

            .cub:hover #front {
                transform: rotateY(0deg) translateZ(5rem);
            }

            .cub:hover #bottom {
                transform: rotateX(-90deg) translateZ(5rem);
            }

            .cub:hover #left {
                transform: rotateY(-90deg) translateZ(5rem);
            }

            .cub:hover #right {
                transform: rotateY(90deg) translateZ(5rem);
            }

            .cub:hover #top {
                transform: rotateX(90deg) translateZ(5rem);
            }

            /*  */

            #back {
                transform: rotateX(180deg) translateZ(1.875rem);
            }

            #front {
                transform: rotateY(0deg) translateZ(1.875rem);
            }

            #bottom {
                transform: rotateX(-90deg) translateZ(1.875rem);
            }

            #left {
                transform: rotateY(-90deg) translateZ(1.875rem);
            }

            #right {
                transform: rotateY(90deg) translateZ(1.875rem);
            }

            #top {
                transform: rotateX(90deg) translateZ(1.875rem);
            }

            @keyframes spin {
                0% {
                    transform: translateZ(6.25rem) rotateX(0) rotateY(0deg);
                }

                100% {
                    transform: translateZ(6.25rem) rotateX(360deg) rotateY(360deg);
                }
            }
        </style>
    </head>

    <body>
        <!-- 3d旋轉圖片div -->
        <div class="cub">
            <ul id="cube">
                <li id="back">
                    <img src=" ">
                </li>
                <li id="bottom">
                    <img src=" ">
                </li>
                <li id="front">
                    <img src=" ">
                </li>
                <li id="left">
                    <img src=" ">
                </li>
                <li id="right">
                    <img src=" ">
                </li>
                <li id="top">
                    <img src=" ">
                </li>
            </ul>
        </div>

    </body>
</html>

個人學習，內容簡略。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

WEB前端第十二課——CSS盒子

1.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin） 2.border，設置元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是通常border屬性值的書寫順序（非嚴格要求）單獨書寫：border-width（寬度，預設3 ...
移動端點擊事件延遲的誕生消亡史

快速反饋對於任何 UI 的實現都是至關重要的。研究表明，100ms 是界面讓用戶感到即時的最大延遲。儘管如此，移動網路仍然受到一個巨大的反饋問題的困擾：觸摸任何元素後，延遲 300 毫秒。這種延遲是許多用戶認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中，本文將帶你瞭解移動... ...
WEB前端常見受攻擊方式及解決辦法

一個網站建立以後，如果不註意安全方面的問題，很容易被人攻擊，下麵就討論一下幾種漏洞情況和防止攻擊的辦法。一、SQL註入所謂SQL註入，就是通過把SQL命令插入到Web表單提交或輸入功能變數名稱或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL命令。具體來說，它是利用現有應用程式，將（惡意）的SQ ...
Split Screen

通過 javascript 偽協議, HTML5 dialog 元素實現的分屏書簽程式 ...
HTML其他概念

俗話說，出來江湖混的，持善良之心，懷正義之氣，總有志同道合者共相為謀。而HTML也有這麼幾個大哥們er、小兄dei、小寶貝兒。他們一起乾大事，為服務好普羅大眾貢獻自己一份力量，接下來讓我們一起走進他們吧。 ...
何時/如何使用 Vue3 render 函數

什麼是 DOM？如果我們把這個 HTML 載入到瀏覽器中，瀏覽器創建這些節點，用來顯示網頁。所以這個HTML映射到一系列DOM節點，然後我們可以使用JavaScript進行操作。例如： let item = document.getElementByTagName('h1')[0] item.te ...
微信端打開頁面的返回處理

微信端返回按鈕 WeixinJSBridge.call('closeWindow'); $("#close").click(function(){ setTimeout(function(){WeixinJSBridge.call('closeWindow');},1000); }) ...
JavaScript的BOM相關內容

BOM(瀏覽器對象模型)簡介、window對象、location對象、history對象、navigator對象、screen對象、document對象 ...