<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Sunstance (Substantial) cube</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
height: 100vh;
background: #606060;
/* 视角，必须开视角才可以看到旋转位移的3D属性 */
perspective: 500px;
overflow: hidden;
}
.main {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
/*
必须声明 transform-style:preserve-3d 才可以展示3D属性的变化
因为其默认 2d ,transform-style:flat
*/
transform-style:preserve-3d;
animation:run 10s infinite;
}
.box {
width: 200px;
height: 200px;
background-color: #f9bf3b;
display: grid;
place-items: center;
font-size: 50px;
position: absolute;
opacity: 0.6;
}
.box:first-child {
transform: rotateY(90deg) translateZ(100px);
}
.box:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px);
background-color: #8e44ad;
}
.box:nth-child(3) {
transform: rotateX(90deg) translateZ(100px);
background-color: #22a7f0;
}
.box:nth-child(4) {
transform: rotateX(-90deg) translateZ(100px);
background-color: #ffa27b;
}
.box:nth-child(5) {
transform: rotateX(180deg) translateZ(100px);
background-color: #e74c3c;
z-index: -1;
}
.box:nth-child(6) {
transform: rotateY(0deg) translateZ(100px);
background-color: #ecf0f1;
}
@keyframes run {
0% {
transform: rotateY(0);
}
10% {
transform: rotateY(180deg);
}
20% {
transform: rotateX(180deg);
/* transform: rotateY(180deg); */
}
}
</style>
</head>
<body>
<div class="main">
<div class="box">右</div>
<div class="box">左</div>
<div class="box">上</div>
<div class="box">下</div>
<div class="box">后</div>
<div class="box">前</div>
</div>
</body>
</html>
