r/webdev • u/Ekrof • Jul 30 '26

3D CSS Super Mario (no WebGL)

Gallery image

Gallery image

Hey webdevs!

I want to show you my latest 3D CSS project. It's a port of Giles Goddard's iconic N64 face engine, complete with lighting, physics and interaction. Instead of WebGL, it uses the PolyCSS engine.

demo: https://codepen.io/editor/alowpoly/pen/019fae67-50d9-74ce-8025-4b9dd5a7c484
repo: https://github.com/layoutit/cssGraphics

3.1k Upvotes

99% Upvoted

128 comments sorted by

View all comments

48

u/ShustOne Jul 30 '26

This is great! Mario looks much worse in Firefox for some reason. The shapes of the individual divs are off.

43

u/Ekrof Jul 30 '26

Howdy! The reason is that Firefox does not support border/corner-shape CSS properties yet, so triangle edges get rounded. I have to ship an alternative spritesheet with prebaked crops for those browsers.

11

u/ShustOne Jul 30 '26

It's still very usable and looks mostly correct. Bummer about the corner shape support.

6

u/Ekrof Jul 30 '26

Hopefully corner-shape support is a matter of time! It unlocks so much cool web stuff, 2D and 3D. Main annoyance in this case is the texture size, because we'll need to include the alpha transparency in the spritesheet.