---
title: backface-visibility
slug: Web/CSS/backface-visibility
tags:
  - CSS
  - CSS Eigenschaft
  - Experimentell
  - Referenz
translation_of: Web/CSS/backface-visibility
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>backface-visibility</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, ob die Rückfläche eines Elements sichtbar ist, wenn diese dem Benutzer zugewandt ist. Die Rückfläche eines Elements ist immer ein transparenter Hintergrund, der, wenn sichtbar, ein Spiegelbild der Vorderfläche zeigt.</p>

<p>Es gibt Fälle, in denen es nicht gewollt ist, die Vorderfläche eines Elements durch die Rückfläche sehen zu können, wie beispielsweise bei einem Kartenumdreheffekt, bei dem zwei Elemente Seite an Seite gelegt werden.</p>

<p>Diese Eigenschaft hat keine Auswirkung auf 2D-Transformationen, da es bei diesen keine Perspektive gibt.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush:css">backface-visibility: visible;
backface-visibility: hidden;
</pre>

<h3 id="Werte">Werte</h3>

<p>Diese Eigenschaft kann zwei verschiedene (exclusive) Werte annehmen:</p>

<ul>
 <li><code>visible</code> bedeutet, dass die Rückfläche sichtbar ist, sodass sie die Vorderfläche gespiegelt darstellt;</li>
 <li><code>hidden</code> bedeutet, dass die Rückfläche nicht sichtbar ist und damit die Vorderfläche versteckt wird.</li>
</ul>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Würfel_mit_transparenten_Flächen">Würfel mit transparenten Flächen</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube showbf"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Alle Flächen sind transparent und die drei Rückflächen sind durch die Vorderflächen sichtbar.&lt;/p&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube hidebf"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Obwohl die Flächen halbtransparent sind, sind die drei Rückflächen nun nicht sichtbar.&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">/* Klassen, die die drei Rückflächen des "Würfels" entweder zeigen oder verstecken */
.hidebf div {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.showbf div {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Definiert den Container-DIV, den Würfel-DIV und allgemeine Fläche */
.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;
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 150% 150%;
  -webkit-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;
}

/* Definiert jede Fläche basierend auf deren Position */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

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

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

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

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

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

/* Verschönert die Tabelle ein wenig */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{ EmbedLiveSample('Beispiele', 620, 460) }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.backface-visibility")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/Guide/CSS/CSS_Transformationen_verwenden" title="/en-US/docs/CSS/Using_CSS_transforms">CSS Transformationen verwenden</a></li>
</ul>