Cube
A pure CSS 3D cube spinner with six semi-transparent faces that rotates simultaneously on the X and Y axes for a satisfying isometric tumble effect.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnercube3dperspectiveloaderwireframe
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A 3D wireframe cube that rotates on both X and Y axes using CSS perspective and transform-style: preserve-3d.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
.cube {
animation: cube 2s infinite ease;
height: 40px;
width: 40px;
transform-style: preserve-3d;
position: relative;
}
.cube div {
background-color: #ffffff22;
border: 2px solid #ffffff;
height: 100%;
position: absolute;
width: 100%;
}
.cube div:nth-of-type(1) { transform: translateZ(calc(40px / -2)) rotateY(180deg); }
.cube div:nth-of-type(2) { transform: rotateY(-270deg) translateX(50%); transform-origin: top right; }
.cube div:nth-of-type(3) { transform: rotateY(270deg) translateX(-50%); transform-origin: center left; }
.cube div:nth-of-type(4) { transform: rotateX(90deg) translateY(-50%); transform-origin: top center; }
.cube div:nth-of-type(5) { transform: rotateX(-90deg) translateY(50%); transform-origin: bottom center; }
.cube div:nth-of-type(6) { transform: translateZ(calc(40px / 2)); }
@keyframes cube {
0% { transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
50% { transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
100% { transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); }
}HTML
html
<div class="cube">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</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; }
.cube {
animation: cube 2s infinite ease;
height: 40px;
width: 40px;
transform-style: preserve-3d;
position: relative;
}
.cube div {
background-color: #ffffff22;
border: 2px solid #ffffff;
height: 100%;
position: absolute;
width: 100%;
}
.cube div:nth-of-type(1) { transform: translateZ(calc(40px / -2)) rotateY(180deg); }
.cube div:nth-of-type(2) { transform: rotateY(-270deg) translateX(50%); transform-origin: top right; }
.cube div:nth-of-type(3) { transform: rotateY(270deg) translateX(-50%); transform-origin: center left; }
.cube div:nth-of-type(4) { transform: rotateX(90deg) translateY(-50%); transform-origin: top center; }
.cube div:nth-of-type(5) { transform: rotateX(-90deg) translateY(50%); transform-origin: bottom center; }
.cube div:nth-of-type(6) { transform: translateZ(calc(40px / 2)); }
@keyframes cube {
0% { transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
50% { transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
100% { transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); }
}
</style>
</head>
<body>
<div class="cube">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</body>
</html>