CSS
body {
margin: 100px 0 0 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
width: 100px;
height: 50px;
-webkit-perspective: 200;
-webkit-transform-style: preserve-3d;
-moz-perspective: 200;
-moz-transform-style: preserve-3d;
perspective: 200;
transform-style: preserve-3d;
}
li {
background: gold;
position: absolute;
width: 100px;
height: 50px;
transform-origin: center;
transform: translate(0,-100px) rotateY(0);
animation: rotate 1s linear infinite;
}
li:nth-child(2) {
background: orange;
animation-delay: .25s;
}
li:nth-child(3) {
background: tomato;
animation-delay: .5s;
}
li:nth-child(4) {
background: orangered;
animation-delay: .75s;
}
@keyframes rotate {
0 {
transform: translate(0,-100px) rotateY(0);
}
100% {
transform: translate(0,-100px) rotateY(180deg);
}
}
