console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>圆形方块</title>
</head>
<body>
    <div class="box">
        <div class="circle c-1"></div>
        <div class="circle c-2"></div>
    </div>
</body>
</html>

/* format */

body {
    margin: 0;
    perspective: 2000px;
}


/* end format */


/* box */

.box {
    position: relative;
    margin: 150px auto;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateZ(0deg);
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0);
    }
    50% {
        transform: rotateX(360deg) rotateY(0);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.circle,
.circle::before,
.circle::after {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    content: '';
}

.c-1 {
    transform: translateZ(200px);
    background-color: #FECC5C;
}

.c-1::before {
    transform: rotateX(90deg) translateZ(200px) translateY(-200px);
    background-color: #41C3AC;
}

.c-1::after {
    transform: rotateX(-90deg) translateZ(200px) translateY(200px);
    background-color: #32526E;
}

.c-2 {
    transform: translateZ(-200px);
    background-color: #FE6B57;
}

.c-2::before {
    transform: rotateY(90deg) translateX(-200px) translateZ(200px);
    background-color: #65A2C5;
}

.c-2::after {
    transform: rotateY(-90deg) translateX(200px) translateZ(200px);
    background-color: #FF884D;
}