Grow your CSS skills. Land your dream job.

backface-visibility

Last updated on:

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 {
  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 {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

Simple example:

See the Pen FjwGA by Chris Coyier (@chriscoyier) on CodePen.

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.

Prefixes

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility.

Values

  • visible (default) - the element will always be visible even when not facing the screen.
  • hidden - the element is not visible when not facing the screen.
  • inherit - the property will gets its value from the its parent element.
  • initial - sets the property to its default, which is visible.

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
12+ 4+ 10+ 15+ 10+ 3.0+ 2.0+

Comments

  1. TBRudy3
    Permalink to comment#

    Cool

  2. Bhaskar Machcha
    Permalink to comment#

    This is very cool for menu designs.

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

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

  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.

  6. 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?

  7. Permalink to comment#

    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.

  8. Really useful use-case for a lesser known property!

    I’ve just used -webkit-backface-visibility: hidden to 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.

  9. Sean
    Permalink to comment#

    it can’t work in IE10 correctly. could you give any idea how to fix it?

  10. Mike
    Permalink to comment#

    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.

  11. Rafael
    Permalink to comment#

    You save my day! Thanks a lot :D

  12. Guy
    Permalink to comment#

    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.

    • Stophe
      Permalink to comment#

      You’re right. …and is still not fixed in Chrome 30. Anyway, is there a better way to prevent the flickering issues Guy mentioned above? I have this issue quite often when working with transitions in Chrome, and I do not really see a pattern behind it…

  13. Youss
    Permalink to comment#

    Don’t work with Internet Explorer

  14. Flavio
    Permalink to comment#

    For the record, with FF 16 (OSX 10.5.8) i see the “front” text on the problematic example. Could this property fix an issue on Android stock browser? My client is not doing any 3D rotation, but is experiencing a problem in which an hidden image that should be visible only on :hover, replaces the idle image.

  15. Opera 15, the first Blink-version, supports 3D transforms, so you might want to update the “Browser Support” table.
    Also, “Problematic in WebKit because backface-visibility not hidden” goes for Blink (Chrome and new Opera) as well.

  16. Sam
    Permalink to comment#

    Hi guys! Is there a workaround for Opera? maybe a js that will run this effect in Opera only?..

  17. Permalink to comment#

    don’t work in ie10

  18. Permalink to comment#

    this property doesn’t properly work on iOS7, causes the content to dissapear while being scrolled

    • Ashto5
      Permalink to comment#

      This little piece of css made my headings stretch on iOS 7, iOS 7 has been my hell for the last couple of weeks, what happily worked on 6 no longer functions the same on 7, thanks apple.

  19. Vinay
    Permalink to comment#

    Even Your Page demo is not working in IE-10 .

  20. Scott
    Permalink to comment#

    FYI…This also caused iOS 7.0.2 chrome and safari to crash for me and took three hours to finally debug it. If you’r mobile browser is crashing this could be the cause if your using it.

    • Armando Sosa
      Permalink to comment#

      Hey Scott! Do you care to say how you finally solved it? I think I’m experiencing crashes because of this.

    • Aaron Fischer
      Permalink to comment#

      I can also attest to the same experience as scott… NEVER put *{ backface-visibility:hidden; } NEVER target all elements, only the ones you need to. This was the cause of my site crashing on devices as well.

  21. areeb
    Permalink to comment#

    hey..
    that’s property not work on IE.
    :(
    is there any solution to support it in IE..
    I have tried much.. by adding -ms prefixes. and other stuff. but backface-visibility not supports..

  22. benny
    Permalink to comment#

    problem with flipping on windows xp see the back above the front

  23. Hi copying your tutorial does not reproduce the effect for me.
    How to declare a front-face and back-face in html?

  24. dont work on Safari

  25. Will

    Thanks for the great article. A while back I followed this guide to create an HTML5 Solitaire game with 3d animations. I think it turned out pretty cool. I love that we can finally do this kind of thing.

  26. Mike McGuire
    Permalink to comment#

    I am having issues in chrome where the backface-visibility only works if I have dev-tools opened. I usually develop with them open anyway so it sucked to think I was done with this feature only to find out it’s not working at all.. Does anyone have any solid advice on how to get this to work in chrome… I mean obviously it has the capability if it displays correct with devtools open.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".