<div class="flipping-1" style="animation: f0 2s infinite"></div>
<div class="flipping-1"></div>
.flipping-1 {
width: 80px;
aspect-ratio: 1;
background: #000;
animation: f1 2s infinite;
}
@keyframes f0 {
0% {transform: rotateX( 0deg)}
100% {transform: rotateX(180deg)}
}
@keyframes f1 {
0% {transform: perspective(150px) rotateX( 0deg)}
100% {transform: perspective(150px) rotateX(180deg)}
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 80px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.