Finally, a legitimate use for 3D CSS
March 28, 2012 § 2 Comments
Production sites using 3D transforms are still quite rare these days. I think one of the reasons is that people can’t find a legitimate reason to use 3D Transforms in their sites. Fair enough. Another reason can be that people think the technique isn’t mature enough yet. Recently I have been working on a website that is making use of 3D CSS, and it’s working!
In this article I want to show you that you can actually use 3D transforms in a production site, and what to expect when you’re thinking of using it in your site.
A brief background
Every year the folks of Mint Digital leave the office behind for a week of ; our product development competition.
The brief this year was to launch a business in 4 days. My team decided to make an affordable personalised present. We came up with Foldable.Me; a little customisable cardboard avatar.
As the picture above shows, the foldable avatar is 3D. However, when we started developing the customisation tool, the preview of the foldable was all in 2D. After drinking a few of the local ales, my colleague Phil came up with an utterly ridiculous plan. “Why don’t we create a 3D preview?”. He showed me a demo of a 3D box spinning around on his screen. “Nice” I thought, “but that’s just a box, and also, we only have 4 days!”.
Somehow though, he persuaded me to give it a try. I was quite surprised that I managed to set up a prototype of the 3D model in less than a day! Everyone was quite happy to see that with some nifty CSS we were able to improve the user experience of our application quite a bit. It was so much more than just a nice 3D visual effect. Our users would now be able to see a realistic preview of their final product! (See it in action)
The other nice thing about using this technique was that whilst we were using some cutting-edge technology, we wouldn’t exclude users with older browsers from our site. Just some extra lines of CSS and we had a nice 2D version of our 3D model.
Now this may all sound very nice, but we (inevitably) had to deal with some technical issues.
Faces pressing through
For example, I learned that the model renders a lot better in most browsers if you explicitly set the backface-visibility to none on every face of your 3D object. This prevents the backface of your cube to press-through the frontface during animations.
However, Chrome had still some render faults during the animations, but setting the z-index for all faces solved that problem. Even though they’re both webkit browsers, and using the same version of Webkit, the rendering was different in Chrome and Safari. Safari was handling it a lot better than Chrome.
Anti-alias
The worst issue I found was the aliasing in Firefox 11. 3D boxes are not anti-aliased at all in Firefox 11. To trigger anti-aliasing, you need to set a transparent outline on all the faces. That outline would, in this case, break the rendering in Webkit browsers. Because it’s a browser specific issue I had to put in some dirty old browser detection to fix this issue. It doesn’t feel good, but at least it works!
Use it!
As you would have noticed there are a lot of issues that will show up when you’re using such a new technique. We wanted to use this in a production site. This meant it had to be of a higher quality than we would aim for, when we would be creating a demo. We had to do some proper cross-browser testing. Using 3D Transforms currently means you have to expect the unexpected. Even the rendering in Chrome and Safari can differ a bit. It is some hassle, but please don’t let this stop you from using 3D Transforms in a production site! It’s simply too much fun to skip it…
[…] Finally, a legitimate use for 3D CSS Tweet […]
[…] the interface itself is a small triumph of coded design implementation. Self-labeled a rare “legitimate” use for 3D CSS, its modeling system is extremely fluid–featuring a crisp feel (take a look […]