CSS/Eigenschaften/äußere Gestaltung/Transformationen/style

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft transform-style können Sie festlegen, wie die Ansicht der Kind-Elemente in 3D dargestellt wird.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • flat: (Standardwert) Das Element wird nicht in 3d dargestellt
  • preserve-3d: Das Objekt wird dreidimensional dargestellt
  • initial
  • inherit


Beispiel ansehen …
    #parent {
      margin: 1em;
      width: 18em;
      height: 18em;
      background-color: #3983ab;
      opacity: 0.8;
      transform-style: preserve-3d;
      animation: drehung 10s infinite linear;
    }
    
    #container:hover #parent {
      transform-style: flat;
    }
    
    @keyframes drehung {
      from { transform: rotateY(0); }
      to   { transform: rotateY(360deg); }
    }
    
    #parent > :first-child {
      background-color: #c32e04;
      transform: translateZ(-100px) rotateY(45deg);
    }

    #parent > :last-child {
      background-color: #dfac20;
      transform: translateZ(50px) rotateX(20deg);
      transform-origin: 50% top;
    }
Der blaue Kasten rotiert durch die animation: drehung um seine Achse. Durch die Einstellung

transform-style: preserve-3d;

werden die roten und gelben Kind-Elemente in einem dreidimensionalen Raum dargestellt und scheinen über, bzw. unterhalb des blauen Kastens zu schweben.

Wenn Sie mit der Maus über den Kasten fahren, ändert sich die transform-style-Eigenschaft:

transform-style: flat;

sodass die Kästen als Flächen übereinander dargestellt werden.


Beachten Sie: Auch wenn CSS-transforms schon im IE 11 unterstützt wird, funktioniert transform-style: preserve-3d; erst im IE Edge.

Browser-Support[Bearbeiten]

Achtung!

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

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

  • -webkit-transform-style


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.


Weblinks[Bearbeiten]