Create CSS 3D Shape EasilyUsing Tridiv

Have you ever worked with 3D on the web? If so, then you’re probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D graphics rendering on your web browser without the use of plugins. In this post, we are introducing Tridiv, a free web app for creating CSS 3D shapes with ease.

If you’re familiar with Blender, one of the most popular desktop 3D modelling applications, then Tridiv is the application for the web. It’s built on top of popular libraries like Animate.css, Hint.css, PrefixFree, Photon, Mousetrap and more.

Overview

Unfortunately, this app is just for Webkit-based browsers which means it’s only supported on Chrome, Safari and Opera 15+. Let’s hope that it’ll come to Firefox soon.

To get you started, Tridiv comes with three types of 3D shapes. Below are examples of basic, medium and advanced shapes. As you can see, the level of difficulty depends on how many shapes and faces there are. The higher the number, the harder it becomes.

To see what’s inside, let’s start by loading the basic shape of iPhone 4S. You’ll then be brought to the Editor page. In Tridiv, there are two main pages: Editor and Preview. You can work on creating the shapes in Editor mode, then flesh it out using the many tools available in the Preview mode.

Working With The Editor

At first glance, the Editor page looks like a simplified version of Blender. With all the tools located only on the right and on top, Tridiv focuses on the four-panel interface editor. The interface shows you the angle of the shape from the top, front and side views. Inside the different panels, you can rotate, edit, duplicate and delete the shape.

On the top right of the page, there are project management controls to rename, save, open and create new projects. When you save the project, it will be stored locally on your computer. The saved document can be used in the future with the Open project feature.

The main features of shape creation are located right next to the project management controls. To create a cool 3D object, you should play around with all the different shapes: cuboid, cylinder, prism and pyramid. With the right shape combination and editing using the Move and Edit selection tool, you can create your desired shape.

Additional settings like Document and Shape properties, and styles are available on the right side of the document. More options for these are showcased after you select the shape you’ve added.

Preview Mode

Preview mode is where you can finalize the design. You can’t edit here and will only be able to retouch the shape to make it look perfect for your website.

All the tools to make your shape fancy are on the right panel, you can add lighting, borders and change the background color. If you want to show your design off, an embed code is available on the top page. Just copy and paste the code onto your website.

While you’re editing, Tridiv is also generating the HTML and CSS as you go enabling you to use the shape without iframe. You can also edit the code within Tridiv or over on CodePen.

Final Thoughts

Indeed, Tridiv is the only powerful app for CSS 3D editor on the web so far. However, there is currently a lack of documentation and tutorials. It’s going to take some time to understand how to use the tool. Nonetheless, it is a still an amazing and useful app that is helmed by only one man, Julian Garnier.

A good way to utilize Tridiv is for the creation of animated logos, like the one you see on its landing page, and simple UI elements. So tell us what would you build with this tool?