Tag Archives: tridiv

CSS Web Links

Tridiv – In-browser CSS 3D Editing

I’m a sucker for clever web things, and today’s link is no exception.  Tridiv is an interface where you can create 3D shapes in CSS, and all without knowing how to make 3D shapes using CSS at all.

tridiv main

The interface is extremely cleverly put together, and literally allows the user to create 3D objects as they might be used to in some other 3D editing interfaces.  There’s a top, front and side elevation, and a handy window for you to move and rotate your newly created object.

tridiv interface

Basic primitive shapes are included in the mix (cuboid, cylinder, prism and pyramid), which you can add to the scene, after which you can rotate, enlarge, and move to your hearts content.  Colors and opacity can be manipulated too, giving you the means to make some pretty spectacular 3D shapes if you wish.  Lighting, shadows and images can also be added to your creations, giving you the ability to make some pretty impressive things.

Once done, you can save for use elsewhere, or even export to Codepen to share with others.

Some have criticised the project based on its practicality, but I personally think it’s a fun little tool that really demonstrates how far the web has come along.  And it was made by just one person!

Only downside is that it currently only works in Chrome, but Julian Garner has claimed he is working on versions for other browsers soon.

To really see what could be done with it, check out this demo on Codepen, created by the developer himself!