Motion Note: this illustration moves, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.
@keyframes spin {
0% { rotate: 0; }
100% { rotate: 360deg; }
}
:root {
background: #ddd;
margin: 0;
height: 100vh;
overflow: hidden;
}
:root::before {
content: "";
width: 20vmin;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 40vmin;
translate: -50% calc(-50% - 30vmin);
background: #aaa;
box-shadow:
0 2vmin #888,
0 4vmin #222,
0 6vmin #aaa,
0 8vmin #888,
0 10vmin #222,
0 12vmin #aaa,
0 14vmin #888,
0 16vmin #222,
0 18vmin #aaa,
0 20vmin #888,
0 22vmin #222,
0 24vmin #aaa,
0 26vmin #888,
0 28vmin #222,
0 30vmin #aaa;
animation: spin 4s linear infinite;
}
About This Illusion
This looks like a three-dimensional tower spinning in space, as seen from above. In reality, it is a flat, two-dimensional image rotating.
Try This
- Mouse over the demo to stop the rotation and the illusion of depth disappears entirely.