Esempio
Lasciate che gli elementi figlio trasformati conservano le trasformazioni 3D:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Prova tu stesso " Definizione e utilizzo
La proprietà transform stile specifica come elementi annidati sono resi in uno spazio 3D.
Note: Questa proprietà deve essere usato insieme al trasformare la proprietà.
Per capire meglio la proprietà transform stile, visualizzare una demo .
| Valore di default: | flat |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.transformStyle="preserve-3d" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- | 11.0 | 16,0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS Sintassi
transform-style: flat|preserve-3d|initial|inherit;I valori delle proprietà
| Costo dell'immobile | Descrizione |
|---|---|
| piatto | Specifica che gli elementi bambino non conservare la sua posizione 3D. Questa è l'impostazione predefinita |
| preserve-3d | Specifica che gli elementi figli conservare la sua posizione 3D |
| iniziale | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| ereditare | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
Tutorial CSS: CSS 2D Transforms
Tutorial CSS: CSS 3D Transforms
Di riferimento HTML DOM: transformStyle property