这里复杂化了代码，以练习flex布局为主，没有太大的参考价值，自己屯一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0;
/* background-color: black; */
}
body {
perspective: 2000px;
perspective-origin:0 0;
transform-style: preserve-3d;
height: 100vh;
background-color: transparent;
}
@keyframes round {
0%{
transform:translate(-50%,-50%) rotateY(0deg)
}
100%{
transform:translate(-50%,-50%) rotateY(360deg)
}
}
.wrapper {
width: 400px;
height: 400px;
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
position: relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transform-style: preserve-3d;
animation:round 5s infinite linear;
}
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
padding: 10%;
position: absolute;
background-color: #333;
}
.content div {
width: 20%;
height: 20%;
border-radius: 50%;
/* border: 1px solid #ccc; */
background-color: #ccc;
}
/* .content1,
.content2,
.content3,
.content4{
} */
.content1 {
justify-content: center;
align-items: center;
transform:rotateY(0deg) translatez(200px);
}
.content2 {
flex-direction: column;
justify-content: space-around;
align-items: center;
transform:rotateY(90deg) translatez(200px);
}
.content3 {
flex-direction: column;
justify-content: space-around;
align-items: center;
transform:rotateY(180deg) translatez(200px);
}
.content3 div:nth-of-type(1) {
align-self: flex-start;
}
.content3 div:nth-of-type(3) {
align-self: flex-end;
}
.content4 {
justify-content: space-around;
align-content: space-around;
flex-wrap: wrap;
transform:rotateY(270deg) translatez(200px);
}
.content4 .temp{
width:40%;
height: 40%;
display: flex;
border: 0;
background-color: transparent;
}
.content4 .temp div{
width:50%;
height: 50%;
margin: auto;
}
.content5 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
transform:rotateX(90deg) translatez(200px);
}
.content5 .temp{
width:30%;
height: 30%;
display: flex;
border: 0;
background-color: transparent;
}
.content5 .temp div{
width:60%;
height: 60%;
margin: auto;
}
.content5 .temp:nth-of-type(3){
width: 80%;
margin: auto;
}
.content5 .temp:nth-of-type(3) div{
width: 25%;
}
.content6 {
flex-direction: column;
justify-content: space-around;
align-content: space-around;
flex-wrap: wrap;
transform:rotateX(270deg) translatez(200px);
}
.content6 .temp{
width:30%;
height: 30%;
display: flex;
border: 0;
background-color: transparent;
}
.content6 .temp div{
width:60%;
height: 60%;
margin: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content content1">
<div></div>
</div>
<div class="content content2">
<div></div>
<div></div>
</div>
<div class="content content3">
<div></div>
<div></div>
<div></div>
</div>
<div class="content content4">
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
</div>
<div class="content content5">
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
</div>
<div class="content content6">
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
<div class="temp">
<div></div>
</div>
</div>
</div>
</body>
</html>
