master

分支 (1)

管理

管理

master

h5-1013
/
作业1.html

<!DOCTYPE html>
<html>
<head>
    <title>正方体</title>
    <style type="text/css">
        body{background: #000;}
        #box{
            width: 300px;height: 300px;
            border-radius: 30px;
            position: relative;
            transform-style:preserve-3d;
            left: 500px;top: 150px;
            transform:rotateX(-30deg) rotateY(-30deg);
            animation: rotate linear 10s infinite;
        }
        @keyframes rotate{
            0%{transform:rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
            20%{transform:rotateX(-90deg) rotateY(-90deg) rotateZ(45deg); }
            40%{transform:rotateX(-135deg) rotateY(-125deg) rotateZ(-135deg);}
            60%{transform:rotateX(-160deg) rotateY(90deg) rotateZ(-180deg);}
            80%{transform:rotateX(-60deg) rotateY(-25deg) rotateZ(-105deg);}
            100%{transform:rotateX(50deg) rotateY(-45deg) rotateZ(-45deg);}
        }
        #box div{
            width: 300px;
            height: 300px;
            position: absolute;
            font-size: 140px;
            color: white;
            line-height: 300px;
            text-align: center;
            background-color: rgba(225,0,0,0.4);
            border: 1px solid red;
            backface-visibility: visible;
        }
        .div1{transform: translateZ(150px);}
        .div2{transform: rotateY(-90deg) translateZ(150px);}
        .div3{transform: rotateX(90deg) translateZ(-150px);}
        .div4{transform: rotateY(90deg) translateZ(150px);}
        .div5{transform: rotateX(-90deg) translateZ(-150px);}
        .div6{transform:translateZ(-150px);}
    </style>
</head>
<body>
    <div id="box">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
        <div class="div6">6</div>
    </div>
</body>
</html>