Get the latest tech news

Creating 3D Worlds with HTML and CSS (2013)


An experiment in creating a 3D environment using HTML elements and CSS transforms featuring lights, shadows and collision detection.

The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. Planes can be added to assemblies, (a wrapper<div> element) allowing the entire object to be rotated and moved as a single entity. I won’t lie, the math nearly broke me, but it was worth the effort because lighting brings an incredible sense of depth and atmosphere an otherwise flat and lifeless environment.

Get the Android app

Or read this on Hacker News

Read more on:

Photo of 3D worlds

3D worlds

Photo of css

css

Photo of HTML

HTML

Related news:

News photo

Show HN: PlutoPrint – Generate PDFs and PNGs from HTML with Python

News photo

"Remove mentions of XSLT from the html spec"

News photo

We keep reinventing CSS, but styling was never the problem