SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="cube">
		<div class="plane plane1">
			<div class="f1"></div>
		    <div class="f2"></div>
		    <div class="f3"></div>
		    <div class="f4"></div>
		    <div class="f5"></div>
		    <div class="f6"></div>
		    <div class="f7"></div>
		    <div class="f8"></div>
		    <div class="f9"></div>
		</div>
		<div class="plane plane2">
			<div class="a1"></div>
		    <div class="a2"></div>
		    <div class="a3"></div>
		    <div class="a4"></div>
		    <div class="a5"></div>
		    <div class="a6"></div>
		    <div class="a7"></div>
		    <div class="a8"></div>
		    <div class="a9"></div>
		</div>
		<div class="plane plane3">
			<div class="b1"></div>
		    <div class="b2"></div>
		    <div class="b3"></div>
		    <div class="b4"></div>
		    <div class="b5"></div>
		    <div class="b6"></div>
		    <div class="b7"></div>
		    <div class="b8"></div>
		    <div class="b9"></div>
		</div>
		<div class="plane plane4">
			<div class="c1"></div>
		    <div class="c2"></div>
		    <div class="c3"></div>
		    <div class="c4"></div>
		    <div class="c5"></div>
		    <div class="c6"></div>
		    <div class="c7"></div>
		    <div class="c8"></div>
		    <div class="c9"></div>
		</div>
		<div class="plane plane5">
			<div class="d1"></div>
		    <div class="d2"></div>
		    <div class="d3"></div>
		    <div class="d4"></div>
		    <div class="d5"></div>
		    <div class="d6"></div>
		    <div class="d7"></div>
		    <div class="d8"></div>
		    <div class="d9"></div>
		</div>
		<div class="plane plane6">
			<div class="e1"></div>
		    <div class="e2"></div>
		    <div class="e3"></div>
		    <div class="e4"></div>
		    <div class="e5"></div>
		    <div class="e6"></div>
		    <div class="e7"></div>
		    <div class="e8"></div>
		    <div class="e9"></div>
		</div>
	</div>
</body>
</html>

            
.cube {
  margin: 200px;
  transform-style: preserve-3d;
  animation: alternate infinite cube 900ms;
}
.plane {
  position: absolute;
  left: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: mediumseagreen;
  opacity: 1;
  display: grid;
  grid-gap: 1px;
  /*grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;*/
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
}
.plane4 {
  transform: translateZ(100px);
  background-color: rgb(119, 28, 204);
}
.plane1 {
  transform: translateZ(-100px);
  background-color: olive;
}
.plane2 {
  transform: rotateY(-90deg) translateZ(-100px);
  background-color: mediumvioletred;
}
.plane3 {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: rgb(29, 158, 180);
}
.plane5 {
  transform: rotateX(-90deg) translateZ(-100px);
  background-color: rgb(65, 214, 19);
}
.plane6 {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: rgb(51, 32, 224);
}

.f1, .f2, .f3, .f4, .f5, .f6, .f7, .f8, .f9 {
  background-color: blue;
}
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8, .a9 {
  background-color: red;
}
.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9 {
  background-color: white;
}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9 {
  background-color: green;
}

.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9{
  background-color: violet;
}

.e1, .e2, .e3, .e4, .e5, .e6, .e7, .e8, .e9 {
  background-color: black;
}
@keyframes cube {
  0% {
    transform: rotate3d(1, 1, 1, -45deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, -120deg);
  }
}