3D Photo Gallery with CSS Trig Functions
3D teardrop gallery by Ana Tudor on CodePen
Open on CodePen ↗32 photos glide along a curved, teardrop-like path in 3D space and never stop moving. Ana Tudor plots the path with parametric equations instead of fixed keyframes.
CSS trig functions work out where each photo sits, a custom property registered with @property drives the motion, and 3D transforms place the photos in depth.
3Danimationtransform-stylesin()
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- scroll-driven
by Chris BolsonCircular typographic scramble
Scroll and scattered letters snap into a circular sentencescroll-driven3Danimation-timelinesibling-index() - interactive
by Jhey TompkinsWorking stopwatch
A stopwatch that keeps real time, counted by CSS animationsinteractiveanimation:checkedcounter() - animation
by Kiarash ZarinmehrDancing skeleton
A small skeleton that never stops dancinganimationarttransformborder-radius