3D First Person Shooter … with CSS

css-fps

With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to deal with — just apply a CSS transform to rotate an element around an axis and you’re done!

“just”

Creating objects from rectangles seems limiting at first but you can do a surprising amount with them.

cssfps-objects

Really impressive. Also: look at the date of that post: January 2013.

Creating 3D worlds with HTML and CSS →
CSS FPS Demo →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.