console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
</head>
<body>
    <div class="box">
        <div class="surface sfc-1"></div>
        <div class="surface sfc-2"></div>
        <div class="surface sfc-3"></div>
        <div class="surface sfc-4"></div>
        <div class="surface sfc-5"></div>
        <div class="surface sfc-6"></div>
    </div>
</body>
</html>

/* format */
body {
    margin: 0;
    perspective: 2000px;
}
/* end format */

.box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 150px auto;
    transform-style: preserve-3d;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotateY(0deg) rotateX(0deg) ;
    }

    to {
        transform: rotateY(360deg) rotateX(360deg) ;
    }
}

.surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    border: 2px solid red;
    background-color: #e0353580;
}

.sfc-1 {
    transform: translateZ(150px);
}

.sfc-2 {
    transform: rotateY(-90deg) translateZ(150px);
}

.sfc-3 {
    transform: rotateY(-90deg) translateZ(-150px);
}

.sfc-4 {
    transform: translateZ(-150px);
}

.sfc-5 {
    transform: rotateX(90deg) translateZ(150px);
}

.sfc-6 {
    transform: rotateX(90deg) translateZ(-150px);
}