CSS Almanac

Home » CSS Almanac » Properties » B » backface-visibility

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;
}

Simple demo.

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+

Subscribe to The Thread

  1. TBRudy3

    Cool

    Reply ↓
  2. Bhaskar Machcha

    This is very cool for menu designs.

    Reply ↓
  3. Jan Drewniak

    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).

    Reply ↓
  4. Attila Hajzer

    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.

    Reply ↓
  5. Akash Saikia

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~