transform-styleĪpašumu, ja piemēro elementam, nosaka, ka šis elements ir bērni novietots 3D telpā, vai saplacināts.
.parent ( transform-style: preserve-3d; )Tas pieņem vienu no divām vērtībām: flat(noklusējums) un preserve-3d. Lai parādītu atšķirību starp abām vērtībām, noklikšķiniet uz pārslēgšanas pogas zemāk esošajā CodePen:
Noklikšķinot uz pogas, demonstrācija izmanto JavaScript, lai pārslēgtu transform-stylevērtību starp preserve-3dun flat.
Kā redzat, kad vērtība tiek mainīta uz flat, pakārtotie elementi vairs netiek sakrauti atbilstoši translateZvērtībām (3D telpā), bet gan izlīdzinās, lai parādītos tā, kā HTML lapā elementi ir pēc noklusējuma.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Nav | 3.0+ | 3.2+ |
Visām pārlūkprogrammām ir nepieciešami piegādātāja prefiksi, izņemot Firefox 16+. Opera izmanto -webkit-versiju 15 un Blink pārveidošanu.
IE10 atbalsta 3D pārveidojumus, bet neatbalsta transform-styleīpašumu.