css3 实现正方体3D旋转

亦凉 2022-06-04 00:06 309阅读 0赞

源代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .all{
                margin-left: 200px;
                width: 300px;
                height: 300px;
                perspective: 500px;
                border: 1px solid green;
                transform: rotate(30deg);
                transform-style: preserve-3d;
                transition: 6s;
            }
            .t1{
    
                width: 0px;
    
                height: 0px;
                margin-left: 100px;
                border: 50px solid red;
                transform: rotateX(90deg);
                transform-origin: bottom;
    
            }
            .t2{
    
                width: 0px;
                height: 0px;
                float: left;
                border:50px solid aquamarine;
                transform: rotateY(-90deg);
                transform-origin: right;
    
            }
    
            .t3{
    
                width: 0px;
                height: 0px;
                float: left;
                margin-left: 100px;
                border:50px solid blue ;
                transform: rotateY(90deg);
                transform-origin:left;
    
            }
            .t4{
    
                width: 0px;
                height: 0px;
                margin-left: 100px;
                margin-top: 100px;
                border: 50px solid orange;
                transform: rotateX(-90deg);
                transform-origin: top;
    
            }
            .t5{
    
                width: 0px;
                height: 0px;
                margin-left: 100px;
                margin-top: -200px;
                border: 50px solid pink;
                transform: rotateX(0deg);
                transform-origin: bottom;
    
            }
            .all:hover{
                transform: rotateX(360deg)rotateY(540deg)rotateZ(290deg)scale(1.2);
            }
    
        </style>
    </head>
    <body>
    <div class="all">
    
        <div class="t1"></div>
        <div class="t2"></div>
        <div class="t3"></div>
        <div class="t4"></div>
        <div class="t5"></div>
    
    
    </div>
    </body>
    </html>