<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center{
width: 500px;
height: 300px;
margin:100px auto;
transform-style: preserve-3d;
animation: example 4s linear infinite;
transition:2s;
transform:rotateX(200deg) rotateY(200deg);
}
@keyframes example {
0% {
transform: rotateX(0deg) rotateY(0deg)
}
50% {
transform: rotateX(150deg) rotateY(150deg)
}
100% {
transform: rotateX(500deg) rotateY(400deg)
}
}
.center>div{
width: 100px;
height: 100px;
background: #fff;
box-shadow: 1px 1px 5px #8888;
border-radius: 10px;
margin-left: 150px;
transform-style: preserve-3d;
}
span{
display: block;
width: 20px;
height: 20px;
background: #333;
border-radius: 50%;
}
.one{
transform-origin:center bottom;
transform: rotateX(-90deg);
display: flex;
justify-content: center;
align-items: center;
}
.two{
transform: translateZ(100px);
display: flex;
justify-content: space-evenly;
align-items: center;
}
.three{
transform-origin: center top;
transform: rotateX(90deg);
display: flex;
justify-content: space-evenly;
align-items: center;
}
.three>span:nth-child(1){
align-self: flex-end;
}
.three>span:nth-child(3){
align-self: flex-start;
}
.four{
transform: translate(-100px,-200px) rotateY(90deg);
transform-origin:right center;
display: flex;
justify-content: space-evenly;
}
.four>P{
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.five{
transform: translate(100px,-300px) rotateY(-90deg);
transform-origin: left center;
display: flex;
justify-content: space-evenly;
}
.five>P{
width: 33%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.five>p:nth-child(2)>span{
align-items: center;
}
.six{
color: red;
transform: translate(0,-400px);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.six>p{
width: 100%;
height: 33%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<div class="center">
<div class="one">
<span></span>
</div>
<div class="two">
<span></span>
<span></span>
</div>
<div class="three">
<span></span>
<span></span>
<span></span>
</div>
<div class="four">
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="five">
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
<div class="six">
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
</p>
</div>
</div>
</body>
</html>