Flip Square
A pure CSS 3D flip-square loader that rotates a diamond through perspective transforms on both the X and Y axes for a satisfying two-step flip effect.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerflip3dperspectiveloadersquare
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A CSS spinner that flips a square in 3D perspective on both X and Y axes.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
.flip-square {
display: flex;
align-items: center;
justify-content: center;
}
.flip-square:before {
animation: flip-square 1.5s infinite;
background-color: #6366f1;
content: '';
display: block;
height: 50px;
width: 50px;
}
@keyframes flip-square {
0% { transform: perspective(50px) rotate(45deg) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(50px) rotate(45deg) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(50px) rotate(45deg) rotateX(-180deg) rotateY(-180deg); }
}HTML
html
<div class="flip-square"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
.flip-square {
display: flex;
align-items: center;
justify-content: center;
}
.flip-square:before {
animation: flip-square 1.5s infinite;
background-color: #6366f1;
content: '';
display: block;
height: 50px;
width: 50px;
}
@keyframes flip-square {
0% { transform: perspective(50px) rotate(45deg) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(50px) rotate(45deg) rotateX(-180deg) rotateY(0deg); }
100% { transform: perspective(50px) rotate(45deg) rotateX(-180deg) rotateY(-180deg); }
}
</style>
</head>
<body>
<div class="flip-square"></div>
</body>
</html>