Creating cool full CSS 3D shapes with Tridiv

Published on 01 octobre 2013
DISCLOSURE: Tridiv only works on browsers that support ‘webkit’ prefix, so Chrome, Opera and Safari…


I recently stumbled on that great app that is Tridiv. I’m familiar with a few CAD softwares (as part of my University courses) so Tridiv was quite straightforward to use. For those who don’t have any experience with these kind of softwares, fear not: Tridiv has made this real simple 🙂


How it works

Basically, you just add shapes on a plane design sheet, on which you can adjust positioning and dimensions. The proposed shapes let you do a lot of amazing stuff (X-Wing created by Julian Garnier: the creator of Tridiv), even if I feel that some more shapes could be cool (sphere, cone,…)



You can make your project sexier by adding colors and images to each face of each shape. However if you want color gradient or even animations, you’ll have to get your hands dirty. Note that the code of your projects can be copied directly to your site but you’ll have to handle the different prefixes for CSS.

«Its a rough path to the heights of greatness.»


You can name and save your projects, although only locally (via the browser localStorage). Since there is no authentication, no export to Drive for instance, is possible. So if you want to have a backup of your beautiful projects, the files («…) are located there:

C:\Users\[YourName]\AppData\Local\Google\Chrome\User Data\Default\Local Storage\


And here is the first draft of project code name: Penguin


And just for fun: 😀

comments powered by Disqus