Introducing TriDiv – CSS 3D Editor

trivSay hello to TriDiv! A CSS editor for creating 3D shapes in CSS. It is a really cool web application created by Julian Garnier. TriDiv allows you to build complex 3D models or images in CSS. It’s a great tool prototyping and educational material in general. Imagine you’re designing some stuff using a WYSIWYG tool, but this time, with a 3-dimensional output. You don’t have to worry about any CSS or JavaScript coding because the tool does it for you. Pretty magical isn’t it?


The application allows you to insert 4 shapes and you can also resize and rotate them to whatever you like. It’s up to your creativity of how are you going to mix all 4 shapes to generate your desired output. At the moment you can only add cuboids, pyramids, cylinder, and prisms.


sample trv


For the views, the interface displays all vantage points like side, front, and top with the main view that you can rotate 720 degrees.


sample 2


At the right pane is where your shapes can be styled. You can change its colors on different sides, adjust its length and width, change background image, opacity, ration, and etc. While you’re playing around with your design, you can switch back and forth over to the preview and editor mode. The interface is neat and pretty straight forward with draggable buttons and switches. Although adding objects is just easy, doing the animations is a bit tricky.

As far as browser support is concerned, TriDiv only works with Google Chrome, Opera, and Safari. However, you can still use TriDiv code with both IE10 and Firefox; you just need to add vendor prefixes in order to render the CSS properly. Julian suggests using for the workaround.


sample 3


The problem with Internet Explorer 10 is that one must also control the 3D perspective by manipulating the vertical index (Z-Index) as it is not able to identify the maintain-3D perspective rule. And for Firefox, it lacks good support for using the video card when rendering the CSS3 3D transform or translate properties. Back in the older days, it was hard to imagine coding 3-dimensional objects in raw CSS. But with the advent of TriDiv, you won’t have to code 3D objects from scratch anymore.