Proprietà CSS transform-style - Sintassi, Valori, Esempi

La proprietà CSS transform-style controlla se i figli di un elemento trasformato vengono mantenuti nello stesso spazio di rendering 3D del loro genitore, oppure appiattiti sul piano del genitore. È ciò che trasforma una serie di elementi transformati annidati in una vera scena 3D invece di un'immagine piatta.

Questa proprietà è una delle proprietà CSS3 e ha un effetto visibile solo sugli elementi che sono a loro volta trasformati con la proprietà transform.

Cosa significa "contesto di rendering 3D"

Quando si ruota un elemento in 3D (ad esempio transform: rotateY(50deg)), il browser deve decidere se i discendenti di quell'elemento fanno parte dello stesso mondo 3D oppure sono semplicemente dipinti sulla superficie del genitore come un adesivo.

flat (il valore predefinito) appiattisce ogni figlio sul piano 2D del genitore. Il figlio può essere comunque trasformato, ma vive nel proprio spazio appiattito — non può sporgere "davanti" o "dietro" al suo genitore in 3D.
preserve-3d mantiene i figli nel sistema di coordinate 3D del genitore, quindi i valori rotateX/rotateY/translateZ sono interpretati relativamente allo stesso punto di fuga. Questo permette di costruire cubi, animazioni di carte e scene 3D stratificate.

transform-style funziona in sinergia con perspective: imposta perspective sull'antenato per definire quanto sia pronunciato l'effetto 3D, e transform-style: preserve-3d sul genitore affinché i figli vivano effettivamente in quello spazio 3D.

Informazione

preserve-3d viene sovrascritto da diverse altre proprietà: applicare overflow (diverso da visible), clip-path, filter, opacity inferiore a 1, o mask allo stesso elemento forza un raggruppamento che appiattisce i figli. Se la tua scena 3D sembra improvvisamente piatta, controlla la presenza di una di queste proprietà sull'elemento preserve-3d.

Informazione

Per la massima compatibilità con i browser, il prefisso -webkit- (Safari, versioni precedenti di Chrome e Opera) può essere usato insieme alla proprietà senza prefisso. I browser moderni supportano transform-style senza prefisso.

Valore iniziale	flat
Si applica a	Elementi trasformabili.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.transformStyle = "flat";

Sintassi

Valori CSS transform-style

transform-style: flat | preserve-3d | initial | inherit;

Esempio della proprietà transform-style:

Esempio di codice CSS transform-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element {
        position: relative;
        height: 250px;
        width: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      #element1 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #8ebf42;
        -webkit-transform: rotateY(50deg);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(50deg);
        transform-style: preserve-3d;
      }
      #element2 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #1c87c9;
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà transform-style con il valore "flat":

Esempio della proprietà CSS transform-style con il valore flat

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        position: relative;
        height: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #cccccc;
        background-color: #eeeeee;
      }
      .element1 {
        margin: 20px;
        border: 1px dotted;
        height: 150px;
        width: 150px;
        background-color: green;
        transform: rotateX(15deg);
        transform-style: flat;
      }
      .element2 {
        margin: 20px;
        border: 1px dotted;
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div class="element">
      <div class="element1">
        Green
        <div class="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
flat	Definisce che i figli degli elementi non saranno posizionati nello spazio tridimensionale. Questo è il valore predefinito di questa proprietà.
preserve-3d	Definisce che i figli degli elementi saranno posizionati nello spazio tridimensionale.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento genitore.

Quando usarla

Usa transform-style: preserve-3d ogni volta che annidi trasformazioni 3D e vuoi che gli elementi interni condividano una prospettiva comune:

Capovolgimento carta — una carta con fronte e retro: il contenitore ottiene preserve-3d e il retro è ruotato con rotateY(180deg) in modo da trovarsi dietro il fronte.
Cubo 3D / carosello — sei facce ciascuna con translateZ e ruotate verso l'esterno da un centro comune.
Scene parallasse stratificate — figli spinti avanti e indietro con translateZ sotto una perspective condivisa.

Mantieni il valore predefinito flat quando applichi solo una singola trasformazione con effetto 2D (scala, rotazione nel piano, inclinazione) e non hai bisogno di profondità — è meno costoso da renderizzare ed evita sorprese dovute alle regole di appiattimento descritte sopra.

Proprietà correlate da abbinare a transform-style:

perspective — definisce quanto sia pronunciato l'effetto 3D.
perspective-origin — sposta il punto di fuga.
transform-origin — cambia il perno di ogni trasformazione.
backface-visibility — nasconde il lato posteriore di un elemento ruotato (essenziale per il capovolgimento delle carte).

Esercitati

Pratica

La proprietà transform-style funziona solo con la proprietà

transition.animation-name.transform.