transform-style
Decyduje, czy dzieci elementu żyją we wspólnej przestrzeni 3D, czy są spłaszczane.
- Wartość domyślna
flat- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.transformStyle = "preserve-3d"
Przykład
#.cube {
transform-style: preserve-3d;
animation: spin 6s linear infinite;
}
@keyframes spin {
to { transform: rotateX(360deg) rotateY(360deg); }
}<style>
.cube-scene { perspective: 600px; width: 90px; height: 90px; margin: 24px auto; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin 6s linear infinite; }
.cube div { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; opacity: .9; }
.f1 { background: #7c3aed; transform: translateZ(45px); }
.f2 { background: #0ea5e9; transform: rotateY(180deg) translateZ(45px); }
.f3 { background: #10b981; transform: rotateY(90deg) translateZ(45px); }
.f4 { background: #f59e0b; transform: rotateY(-90deg) translateZ(45px); }
.f5 { background: #f43f5e; transform: rotateX(90deg) translateZ(45px); }
.f6 { background: #6366f1; transform: rotateX(-90deg) translateZ(45px); }
@keyframes spin { to { transform: rotateX(360deg) rotateY(360deg); } }
</style>
<div class="cube-scene"><div class="cube"><div class="f1">1</div><div class="f2">2</div><div class="f3">3</div><div class="f4">4</div><div class="f5">5</div><div class="f6">6</div></div></div>Definicja i zastosowanie
#Właściwość transform-style ustawia się na rodzicu elementów przekształcanych w 3D. Domyślnie (flat) dzieci są spłaszczane do płaszczyzny rodzica, więc zagnieżdżone obroty 3D nie tworzą prawdziwej bryły.
Wartość preserve-3d zachowuje trzeci wymiar: dzieci mogą znajdować się przed i za sobą, a obracanie rodzica obraca całą scenę. Dzięki temu da się zbudować sześcian z sześciu ścianek albo odwracaną kartę.
Niektóre właściwości, takie jak overflow: hidden czy filter, wymuszają spłaszczenie i wyłączają efekt preserve-3d.
Składnia
#transform-style: flat | preserve-3d;Wartości
#- Wewnętrzny kafelek jest spłaszczony do płaszczyzny rodzica.
- Wewnętrzny kafelek unosi się nad rodzicem w przestrzeni 3D.
Wartości w praktyce
#flat
.demo { transform-style: flat; }preserve-3d
.demo { transform-style: preserve-3d; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli bryła 3D „spłaszcza się”, poszukaj na rodzicu
overflow: hidden,filteralboopacitymniejszego niż 1. - Szanuj ustawienie ograniczonego ruchu: w
prefers-reduced-motion: reducezatrzymaj obracające się sceny.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.