Rotate gallery
.rotate-gallery-card is a three-column grid with staggered rotateY keyframes so the row feels like a slow carousel pass.
Waves
Forest
City
Widely Supported
Quick implementation
@keyframes rotate-gallery-sway {
0%, 100% { transform: rotateY(-18deg); }
50% { transform: rotateY(18deg); }
}
.rotate-gallery-demo { perspective: 900px; }
.rotate-gallery-card__item {
animation: rotate-gallery-sway 6s ease-in-out infinite;
}Prompt this to your LLM
Mood boards and stock pickers.
You are animating a row of three thumbnails with a carousel feel.
Goal: parent perspective; each child rotateY oscillates between negative and positive; stagger animation-delay.
Constraints:
- prefers-reduced-motion: no rotation.
Return CSS.Why this matters in 2026
Decorative motion can imply a browsable set even when interaction is still a static grid.
The logic
Perspective on the row makes each tile’s rotateY read as a shared stage; stagger breaks lockstep repetition.
Accessibility & performance
Disable the sway for reduced motion; keep angles moderate to avoid unreadable labels.