Optimus Prime Transforms in 3D CSS
Optimus Prime by Jhey Tompkins on CodePen
Open on CodePen ↗A 3D Optimus Prime that changes between robot and truck when you click it. A second checkbox changes how fast the change plays.
Jhey Tompkins built it with HTML and CSS, and a checkbox holds the robot or truck state, so no JavaScript is needed.
3Dinteractivetransform-style:checked
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() - 3D
by Ben Evans3D room
A furnished room in 3D, made only with HTML and CSS3Dartperspectivetransform-style