Create Pure CSS 3D Model With Tridiv

Create Pure CSS 3D Model With Tridiv


Create Pure CSS 3D Model With Tridiv

We all know about WebGL, it's an open standard browser implementation of OpenGL, and you can create 3D games, effect with Javascript. Now, we have a new way to create 3D graphic - by using CSS.

I found this very impressive tool called Tridiv, a web-based editor for creating 3D shapes in CSS. If you used 3D animation software such as 3DStudio Max or Maya before, Tridiv is a super basic version of it. It has top, front, side view. You can add shapes and combine them together to build your desired 3D model. You can also drag around to see the 3D shape you've created from different angles.

I'm quite impressed with its user friendliness, as in, I know how to use it even though it was my first attempt. Each shape can be styled easily. You can can change its dimension, opacity, colors, corner and even apply image on the shape. Once it's done, it generates all the HTML markup and CSS code so you can embed it yourself. Or share it on codepen.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement