CSS3News

Tridiv: an amazing web-based CSS 3D editor

Julian Garnier's tool for making 3D objects in CSS has exciting capabilities

Coder Julian Garnier has made waves in the development community with the release of his extraordinary web-based 3D editor, Tridiv, which has been described as "astounding" by Andy Baio and scores of other excited tweeters.

The editor provides a traditional four-pane interface that gives a view from each plane, as well as a preview pane showing the final object. It's possible to create extremely sophisticated 3D objects, as demonstrated by this impressive example. HTML and CSS is generated on the fly and can be edited within Tridiv or over on CodePen.

The only downside? It's just for WebKit. For this reason, Christian Heilmann tweeted that it's "deep in the 'can do, but should you' camp".

Some have expressed amazement that Tridiv is a one-person project, but Garnier has confirmed that he worked on it alone over a five-month period, coding for about an hour every day.

"Just after finishing my Hartwig chess CodePen demo, I wanted to push the limits of 3D in CSS even further, just to see how far I could go. I started coding in my free time, but quickly got discouraged because of the time needed to achieve complex objects in CSS. Even if you know how to code a cube in CSS, it can still take a minimum of five minutes to get it right.

"So I coded a really simple JS app to help me create cubes by defining their dimensions, positions and rotation. It took a few hours to make something usable.

"That's when I thought that it would be great if this was a full WYSIWYG app, with more shapes, lighting etc...

"I started working on it five months ago, working for approximatively one hour a day, then I spent almost all of my two weeks of summer vacations adjusting the UI, creating the demos, building the website, fixing bugs and so on."

Garnier suggests that a good use-case for Tridiv is in creating logo animations similar to the one he uses on the landing page: "No JavaScript is needed, and it runs pretty smoothly on iOS devices (I haven't tested other mobile platforms yet), which is a scenario in which JavaScript will fail most of the time. So I think it can be really be useful for logos and simple UI elements, where using JavaScript is probably not worth it."

Garnier will soon be working on improving cross browser compatibility, with Opera 15 at the top of his to-do list.

"The cool thing with kind of app is that you never know what people will build with it. We'll see, I'm pretty excited about this."

Trivdiv is free to use and available now.

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection