Exemplu
Lăsați elementele de copil transformate păstra transformările 3D:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Încearcă - l singur » Definiție și utilizare
Proprietatea stil de transformare specifică modul în care elementele imbricate sunt redate în spațiu 3D.
Note: Această proprietate trebuie să fie utilizat împreună cu transformarea proprietății.
Pentru a înțelege mai bine proprietatea stil transforma, o demonstrație .
| Valoare implicită: | flat |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transformStyle="preserve-3d" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transform-style | 36,0 12,0 -webkit- | 11.0 | 16.0 10.0 -moz- | 9 4.0 -webkit- | 23.0 15,0 -webkit- |
CSS Sintaxa
transform-style: flat|preserve-3d|initial|inherit;Valori de proprietate
| Valoarea proprietății | Descriere |
|---|---|
| apartament | Specifică faptul că elementele de copil nu își va păstra poziția 3D. Acest lucru este implicit |
| păstra-3d | Specifică faptul că elementele de copil își va păstra poziția 3D |
| iniţială | Setează această proprietate la valoarea implicită. Citiți despre inițială |
| moşteni | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Pagini similare
Tutorial CSS: CSS 2D Transformări
Tutorial CSS: CSS 3D Transformări
HTML DOM referință: transformStyle property