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


Problematic in WebKit because backface-visibility not hidden


This isn't problematic in Firefox for whatever reason, although the property works the same way.


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.


  • 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+


  1. User Avatar
    Permalink to comment#


  2. User Avatar
    Bhaskar Machcha
    Permalink to comment#

    This is very cool for menu designs.

  3. User Avatar
    Jan Drewniak
    Permalink to comment#

    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. User Avatar
    Attila Hajzer
    Permalink to comment#

    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. User Avatar
    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?


  6. User Avatar

    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.


  7. User Avatar
    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. User Avatar
    Guy Routledge
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    Permalink to comment#

    You save my day! Thanks a lot :D

  12. User Avatar
    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.

    • User Avatar
      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. User Avatar
    Permalink to comment#

    Don’t work with Internet Explorer

  14. User Avatar
    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. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

  17. User Avatar
    Permalink to comment#

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

    • User Avatar
      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.

  18. User Avatar
    Permalink to comment#

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

  19. User Avatar
    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.

    • User Avatar
      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.

    • User Avatar
      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.

  20. User Avatar
    Permalink to comment#

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

  21. User Avatar
    Permalink to comment#

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

  22. User Avatar
    Permalink to comment#

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

  23. User Avatar

    dont work on Safari

  24. User Avatar

    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.

  25. User Avatar
    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.

  26. User Avatar
    Permalink to comment#

    Has anyone ever seen a dead pixel line when using backface-visibility but only on retina screens ?

    • User Avatar
      Permalink to comment#

      I’m having this issue, too! Ruining a site on retina but removing the rule makes it a little stutter-ey on non-retina. If anyone has any genius solutions, would love to hear!

  27. User Avatar
    Permalink to comment#

    nice article

  28. User Avatar
    Permalink to comment#

    I’m trying to get this example because this make the effect every time you hover the element, because I found others that some times don’t make the effect without transition, but this example is not working in IE 10+, neither the page example… Any one could fix it? Thanks!

  29. User Avatar
    Permalink to comment#

    You save my day! Thanks very much.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.