Skip to main content
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 {
  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

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
12*15*10*11124*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
3.2*46No3*7868