CSS/Eigenschaften/äußere Gestaltung/Transformationen/backface-visibility

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft backface-visibility können Sie festlegen, wie die Rückseite eines transformierten Elements dargestellt wird, wenn dies z.B. 180° um die Y-Achse rotiert würde. Normalerweise würde die Vorderseite gespiegelt durchscheinen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • visible: (Standardwert) die Vorderseite scheint gespiegelt durch
  • hidden: die Rückseite wird weiß und die Vorderseite ist so nicht sichtbar


Beispiel ansehen …
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
  text-align: center;
  line-height: 200px;
  font-size: 1.5em;
  backface-visibility: visible;
}
 
.cube:hover div {
    backface-visibility: hidden;
}
Der CSS-Würfel hat durchscheinende Seiten. Bei :hover werden die Rückseiten weiß und Sie sehen nur die Ihnen zugewandten Seiten.


Eine Anwendungsmöglichkeit bietet sich z.B. bei Kartenspielen, bei denen Spielkarten aus 2 Rücken an Rücken liegenden Elementen bestehen. Bei einer Animation wie Austeilen oder Weitergeben sollen Wert und Farbe der Karte nicht zufällig sichtbar werden.

[Bearbeiten] Browser-Support

Achtung!

Für ältere Browser-Versionen müssen Sie proprietäre Eigenschaften verwenden.

für Safari 6-8 und Android -4.4.4:

  • -webkit-backface-visibility


Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML