html5—旋轉立方體

時間 2020-07-25

原文原文鏈接

以上立方體是徹底參考 https://blog.csdn.net/liuyingshudian/article/details/105249962 完成。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>選裝動畫</title>
        <style>
            *{box-sizing: border-box;}
            html{
                background-color: gold;
            }
            body{
                height: 20em;
                width: 20em;
                left: 50%;
                top: 50%;
                position: absolute;
                margin: -10em 0 0 -10em;
                perspective: 2000px;
            }
            
            #cube{
                animation: 10s spin linear infinite;
                transform-style: preserve-3d;
                position: absolute;
                height: 100%;
                width: 100%;
            }
            #cube *{
                height: 20em;
                width:20em;
                background-color: rgba(0,0,0,0.6);
                position: absolute;
                border:15px solid rosybrown;
            }
            @keyframes spin{
                from{transfrom:rotateX(0deg) rotateY(0deg);}
                to{transform: rotateX(360deg) rotateY(360deg);}
            }
            
            #front{transform: rotateY(0deg) translateZ(10em);}
            #left{transform: rotateY(90deg) translateZ(-10em);}
            #right{transform: rotateY(90deg) translateZ(10em);}
            #top{transform: rotateX(90deg) translateZ(10em);}
            #bottom{transform: rotateX(90deg) translateZ(-10em);}
            #back{transform: rotateY(0deg) translateZ(-10em);}
        </style>
    </head>
    
    <body>
        <div id="cube">
            <div id="front"></div>
             <div id="left"></div>
             <div id="right"></div>
             <div id="top"></div>
             <div id="bottom"></div>
             <div id="back"></div>
        </div>
    </body>
</html>

放右上角一個試驗一下，不知道是否要根據瀏覽器寫不一樣的CSS？瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。