Products & branding 10 CSS 3D effects

Products & branding

Phone mockup

Pure CSS

A phone with real thickness: screen, back, four thin walls and a stack of rounded slabs that fills the corners. It turns to show both sides.

Products & branding

Payment card tilt

CSS + JS

The card leans toward your pointer and a glare follows it. JS writes four custom properties; CSS does the tilt, the glare and the return to rest.

Products & branding

Unboxing

Pure CSS

Hover or focus: the lid swings open on its back edge and the product card rises out. One hinge (transform-origin) and two staggered transitions.

Products & branding

Drinks can

Pure CSS

Twenty flat strips form the cylinder. Every strip shows the same wide label, shifted by its own index, so the artwork wraps around without a seam.

Products & branding

Product turntable

CSS + JS

Drag sideways to spin the speaker; let go and it coasts to a stop. JS only tracks one angle and one colour, both handed to CSS as custom properties.

Products & branding

Vinyl sleeve

Pure CSS

The record is sandwiched between the two sides of the sleeve. On hover or focus it slides out, its label starts to spin and the sleeve turns its open end to you.

Products & branding

Extruded logo

Pure CSS

One clip-path shape repeated in 14 layers, 2px apart. The stack reads as a solid block; back layers are darker and the front one carries a sweeping shine.

Products & branding

Layered browser

Pure CSS

A UI mockup cut into depth layers: window, sidebar, cards and a floating button each sit at their own translateZ. Hover or focus pulls them further apart.

Products & branding

Smartwatch

CSS + JS

A watch with thickness, strap stubs and the real time. Once a second JS writes three angles and two integers; CSS turns the hands and prints the digits with counters.

Products & branding

Award medal

Pure CSS

A medal hanging from a neck ribbon: it sways from the neck and twists on its ring, with a real metal edge and a shine that sweeps each time it faces you.