Products & branding 19 CSS 3D effects

The 19 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.

• Move pointerTouch & move

  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.

• HoverTap

  Products & branding

  Unboxing

  Pure CSS

  A shut box, seen from a gentle angle. 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.

• Drag · ClickDrag · Tap

  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.

• HoverTap

  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, two units apart. The stack reads as a solid block; back layers are darker and the front one carries a sweeping shine.

• HoverTap

  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.

• HoverTap

  Products & branding

  Headphones

  Pure CSS

  Over-ear headphones turning on a stand: the band is a ring of tangent strips, each cup a short cylinder laid on its side. Hover or focus and they turn to face you and light up.

• Products & branding

  Perfume bottle

  Pure CSS

  A faceted glass bottle you can see into: an octagonal prism of glass around a smaller prism of liquid, a fluted gold cap and a label. A glint sweeps across each time it faces you.

• HoverTap

  Products & branding

  Business card

  Pure CSS

  A thick business card with painted edges. Hover or focus and it flips to show the back; the logo and the text are lifted off the paper with translateZ, so they shift against it as it turns.

• Products & branding

  Retro camera

  Pure CSS

  A rangefinder camera rocking on the table: a box body, a lens barrel of sixteen strips around the Z axis and a glass disc whose reflection slides the other way as it turns.

• Products & branding

  Takeaway coffee

  Pure CSS

  A paper cup that is wider at the top: twenty trapezoid strips lean out from the base circle. The sleeve and its logo wrap around without a seam, the lid is a stack of discs and the steam keeps rising.

• HoverTap

  Products & branding

  Bluetooth speaker

  Pure CSS

  A portable speaker lying on its side: a sixteen-strip cylinder in dotted fabric with rubber bands, a passive radiator in each end cap, a button pad on top and a logo plate. Hover or focus and it tilts to show its buttons while the grille pulses teal.

• HoverTap

  Products & branding

  Twist-up lipstick

  Pure CSS

  A violet lacquer lipstick with a gold collar. Hover or focus and the cap lifts off and sets down beside it, then the pink bullet turns a full circle as it rises out of the tube. The case, the cap and the bullet are twelve-strip cylinders, and the bullet’s angled tip is each strip cut by clip-path to the same slanted plane.

• HoverTap

  Products & branding

  Foldable phone

  Pure CSS

  A book-style foldable phone, shut, showing its cover screen. Hover or focus and the right half swings open on its hinge like a page while the phone slides over to stay centred, and the big inner screen lights up across both halves. Each half is a thin slab of real faces, and the hinge spine turns at half the fold angle so it is always round the outside.

• Hover · ClickTap

  Products & branding

  Retro game controller

  Pure CSS

  A 90s-style “dog-bone” gamepad in off-white and grey, seen nearly head-on, its body a stack of rounded slices so it has real thickness. It leans toward the pointer, and every control, the black cross d-pad, the four coloured face buttons, Select and Start, is a real button that presses into the pad and lights up. No JavaScript.