MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The backface-visibility CSS property determines whether the back face of an element is visible when turned towards the user.

/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;

/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

An element's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space.

This property has no effect on 2D transforms, which have no perspective.

Initial valuevisible
Applies totransformable elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The backface-visibility property is specified as one of the keywords listed below.

Values

visible
The back face is visible when turned towards the user.
hidden
The back face is hidden, effectively making the element invisible when turned away from the user.

Formal syntax

visible | hidden

Example

This example shows a cube with transparent faces.

HTML

<table>
  <tbody>
    <tr>
      <th><code>backface-visibility: visible;</code></th>
      <th><code>backface-visibility: hidden;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube showbf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>
          All the faces are transparent, and the three
          back faces are visible through the front ones.
        </p>
      </td>
      <td>
        <div class="container">
          <div class="cube hidebf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>
          No face is opaque, but the three back faces
          are always hidden now.
        </p>
      </td>
    </tr>
  </tbody>
</table>

CSS

/* Shorthand classes that will show or hide the
   three back faces of the "cube" */
.hidebf div {
  backface-visibility: hidden;
}

.showbf div {
  backface-visibility: visible;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}

Result

Specifications

Specification Status Comment
CSS Transforms Level 2
The definition of 'backface-visibility' in that specification.
Editor's Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support12 -webkit-

Yes

Yes -webkit-

16

10 -moz-

49 -webkit-

45 -webkit- 1

1015 -webkit- Yes -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 -webkit- Yes -webkit-

Yes

Yes -webkit-

16

10 -moz-

49 -webkit-

44 -webkit- 2

Yes -webkit- Yes -webkit- ?

1. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: mfluehr,