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."
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.