backface-visibility – CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 01 Feb 2023 15:27:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1 backface-visibility – CSS-Tricks https://css-tricks.com 32 32 45537868 backface-visibility https://css-tricks.com/almanac/properties/b/backface-visibility/ https://css-tricks.com/almanac/properties/b/backface-visibility/#comments Thu, 01 Sep 2011 03:06:32 +0000 http://css-tricks.com/?page_id=13980 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 …

backface-visibility originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

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

Syntax

backface-visibility: visible | hidden;
  • Initial value: visible
  • Applies to: transformable elements
  • Inherited: no
  • Percentages: n/a
  • Computed value: specific keyword
  • Animation type: discrete

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 gets its value from the its parent element.
  • initial – Sets the property to its default, which is visible.

Demo

This is useful when doing 3D effects. For instance…

Works properly

<div class="container">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>

Problematic in WebKit because backface-visibility not hidden

<div class="container no-hide">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>

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

Browser support

IEEdgeFirefoxChromeSafariOpera
10All10 112 25.1 215 2
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAll3 25 262
Source: caniuse

1 Supported in Firefox 10-15 with prefix -moz-
2 Supported in Chrome 12-35, Safari, Safari iOS, and Opera 15-22 with prefix -webkit-

backface-visibility originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]> https://css-tricks.com/almanac/properties/b/backface-visibility/feed/ 39 13980