Manuale di riferimento CSS

Regole CSS (RULES)

Completo delle proprietà CSS

Proprietà transition del CSS3 Proprietà transform-origin del CSS3

Metodi di utilizzo e esempi di transform-style CSS3

L'attributo transform-style CSS specifica se i figli dell'elemento sono posizionati nello spazio 3d o vengono stesi sulla superficie dell'elemento. Se piatto, i figli non esisteranno indipendentemente nello spazio 3d.

Questa proprietà è applicabile solo agli elementi contransformSpecifica il figlio dell'attributo.

La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi di utilizzo dell'attributo nel script JavaScript.

Valore predefinito:	flat
Applicabile a:	Elementi trasformabili
Ereditarietà:	Nessuno
Animabile:	No.Si prega di consultare Proprietà di animazione.
Versione:	Nuova funzionalità di CSS3
Sintassi JavaScript:	Oggetto.style.transformStyle="preserve-3d"

Utilizzo della sintassi di transform-style

La sintassi di questa proprietà è la seguente:

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

Gli esempi seguenti illustrano come utilizzare la proprietà transform-style.

Esempio

img　{
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-style:　preserve-3d;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-style:　preserve-3d;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-style:　preserve-3d;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-style:　preserve-3d;
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
flat	I figli dell'elemento vengono afflati, ossia posizionati nel piano dell'elemento stesso. Questo è il valore predefinito.
preserve-3d	I figli dell'elemento devono essere posizionati nello spazio 3D.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato adotta il valore della proprietà transform-style dell'elemento padre.

Compatibilità del browser

La compatibilità del browser per la proprietà transform-style, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 10+ ^-moz-, 16 + Chrome 12+ ^-webkit-, 36+ Internet Explorer 11+ Apple Safari 4+ ^-webkit- Opera 15+ 　 ^-webkit-, 23+

Per ulteriori letture

Ecco alcune guide da consultare:Transformazioni 2D CSS3,Transformazioni 3D CSS3

Proprietà correlate:backface-visibility,perspective,perspective-origin,transform,transform-origin.

Proprietà transition del CSS3 Proprietà transform-origin del CSS3