3D Folding Box Toggle in Pure CSS
3D package toggle by Jhey Tompkins on CodePen
Open on CodePen ↗Tap the flat cardboard template and it folds into a taped box, flips over, then unfolds on the next tap.
Jhey Tompkins wrote up the build. A hidden checkbox sets a --packaged custom property to 0 or 1, which drives the rotations, and a --step value on each part staggers its transition-delay so the flaps fold in order.
3Dinteractive:checkedtransform-style
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