backface-visibility
The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the "front" of an element no longer faces the screen. For instance, this would flip an element away from the screen:
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}It will look as if you picked it up with a spatula and flipped it over like a pancake. That's because the default for backface-visibility is visible. Instead of it being visible, you could hide it.
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}This is useful when doing 3D effects. For instance:
Works properly
Front
Back
Problematic in WebKit because backface-visibility not hidden
Front
Back
This isn't problematic in Firefox for whatever reason, although the property works the same way.
More Information
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 11.60- | 10+ | 3.0+ | 2.0+ |
Cool
This is very cool for menu designs.
Finally some other browsers have begun implementing this cool feature that’s been around in safari for a while now.
I’ve noticed this property doesn’t work on elements that have been absolutely positioned (in chrome anyway).
Is there anyway you could change the THICKNESS of the actual div ? to show that the div isn’t flat? like a Depth? I think that would be really cool!
but its still cool.
Hey, very nice article. Helped me in some cases when i used this css rule.
But I am in big dilemma regarding this.
For last many days, i have been struggling canvas drawing operation(different shapes) in sencha touch(javascript) application.
The drawing of lines where a bit slow while the finger moved ahead of the line while drawing it in the IPAD in canvas.
I was not able to figure out that what made this application little slow. Then suddenly, when i added backface-visiblity: visible, propery in css of the body, the drawing become faster as it should be.
But what is the importance of this css in relation to canvas drawing, as there is no animation going on while drawing something on canvas?
Thanks.
Do you know why this would break my :active states?
If I remover the backface-visibility property, everything works fine. But once it’s included, I can no longer get any sort of :active pseudo state to work.
Thoughts?
I don’t think the backface-visiblity-hidden works on Android 3.0. Looking at it on a Xyboard tablet (running 3.2.2), and it doesn’t appear to do any hiding. Total bummer. I wish Google would get their version of webkit up to snuff.
I agree – I don’t believe this is supported in the Android browser for some reason.
Try this example: http://desandro.github.com/3dtransforms/examples/card-01.html
It works on Chrome/Safari on desktop, even works on Chrome browser app on iOS, but doesn’t work on Android browser (Jelly Bean).
Really useful use-case for a lesser known property!
I’ve just used
-webkit-backface-visibility: hiddento solve text rendering inconsistencies in webkit where there were lot of animations on a page and text was being rendered thinner (and occasionally flickering) than other pages. This made all text thin but at least it was consistent.it can’t work in IE10 correctly. could you give any idea how to fix it?
See my comment here http://davidwalsh.name/css-flip
Thanks very much. I this is probably the 5th time I’ve fixed something on my site by getting advice from this site. You’re a site-saver, man.
You save my day! Thanks a lot :D
Do not use -webkit-backface-visibility, it’s extremely buggy, and in many cases causes the handle on the vertical scroll bar to disappear. Still buggy as of Chrome 23.
Don’t work with Internet Explorer