Creating CSS 3D Shape
Have you ever worked with 3D on the web? If so, then you are probably familiar with WebGL (web Graphics Library), a JavaScript API designed to render 3D and 2D graphics in your web browser without using plug-ins. In this article, we present Tridiv, a free web application to easily create 3D CSS shapes.
If you are familiar with Blender, one of the most popular desktop 3D modeling applications, Tridiv is the application for the web. It is based on popular libraries like Animate.css, note.css, PrefixFree, Photon, mousetrap and more.
General overview
Unfortunately, this application is only intended for Webkit-based browsers, which means that it is only supported by Chrome, Safari and Opera 15+. Hopefully Firefox will arrive soon. To help you get started, Tridiv includes three types of 3D shapes. Below are examples of basic, intermediate and advanced shapes. As you can see, the difficulty level depends on the number of shapes and faces. The higher the number, the more difficult it becomes.
To see what’s inside, we first load the basic shape of the iPhone 4s. you will then be redirected to the editor’s page. In Tridiv, there are two main pages: The editor and The Preview. You can create the shapes in editor mode, then work with the many tools available in Preview mode.
Working with the editor
At first glance, the editor’s page looks like a simplified version of Blender. Since all the tools are just to the right and at the top, Tridiv focuses on the four-panel editor. The user interface shows you the angle of the shape in the top, front and side views. In the different panels, you can rotate, modify, duplicate and delete the shape.
At the top right of the page, you will find project management controls that allow you to rename, save, open and create new projects. When you save the project, it is saved locally on your computer. The saved document can be used in the future with the Open Project function.
The main form creation functions are located right next to the project management controls. To create a cool 3D object, you need to play with the different shapes: cuboid, cylinder, prism and Pyramid. With the right combination of shapes and Editing using the move and edit selection tool, you can create the desired shape.
Additional settings such as document and shape properties and styles are available on the right side of the document. Other options are displayed after selecting the added shape.
Preview Mode
In Preview mode, you can finish the design. You can’t edit here and you can only retouch the shape to make it perfect for your website.
All the tools to shape your shape are on the right side. You can add lighting and borders and change the background color. If you want to display your design, an embed code is available on the top page. Just copy the Code and paste it on your website.
During editing, Tridiv also generates HTML and CSS, which allows you to use the form without an iframe. You can also edit the Code in Tridiv or via CodePen.
Final Thoughts
In fact, Tridiv is so far the only powerful application for the 3D CSS editor on the web. However, there is currently a lack of documentation and tutorials. It will take some time to figure out how to use the tool. Nevertheless, it is still an awesome and useful application run by one man, Julian Garnier. A good way to use Tridiv is to create animated Logos such as the ones you see on the landing page and simple user interface elements.