html5—旋转立方体

以上立方体是完全参考 https://blog.csdn.net/liuyingshudian/article/details/105249962 完成。

<!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？

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。