3D Triangles

Triangles have always been a foreign shape in the world of CSS. Just like circles, until recently, there was no easy and flexible way to present a triangle using the built-in properties in CSS.

Using CSS Transforms we can create triangles on a different dimension – instead of forcing a rectangle to become a triangle, we can use rectangles for the triangle sides, and by rotating them perspectively, create a three-dimensional triangle.

* Best viewed on Chrome or Safari.

On my experiment I’ve ordered a matrix of 3D triangles. The interesting fact is that when timing the right key frame animation we can get the triangles to work together to spin or bump, resembling very physical behaviours.

The board of triangles looks a lot like the big bulletin boards we see on road sides. While those signs are static and clumsy, this experiment allows us to investigate them from a few points of view and at various opacity levels. Not only it is interesting to understand how the triangles react together in a technical manner, it is also fascinating to watch visually.