SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<title>伪元素立方体</title>
</head>

<body>
	<div class="layer-1">
		<div class="cubes-1">
			<div class="cute ct-1"></div>
			<div class="cute ct-2"></div>
			<div class="cute ct-3"></div>
		</div>
	</div>
</body>

</html>
/* format */

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


/* end format */


/* cubes-1 */

.layer-1 {
    position: relative;
    margin: 200px auto;
    width: 200px;
    height: 200px;
    transform: rotateX(50deg) rotatey(50deg);
    transform-style: preserve-3d;
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotateX(25deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(25deg) rotateY(360deg) rotateZ(360deg);
    }
}

.cubes-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
}

.cute {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #01a2ff96;
    transform-style: preserve-3d;
}

.cute::before,
.cute::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    content: '';
}

.cubes-1>.cute::before {
    transform: translateZ(-25px);
}

.cubes-1>.cute::after {
    transform: translateZ(25px);
}

.ct-1::before,
.ct-1::after {
    background-color: #ff000080;
}

.ct-2 {
    transform: rotateY(90deg);
}

.ct-2::before,
.ct-2::after {
    background-color: #00b40080;
}

.ct-3 {
    transform: rotateX(90deg);
}

.ct-3:before,
.ct-3:after {
    background-color: #002fff7e;
}


/* end cubes-1 */