Transformacje 3D: rotateX, rotateY, translateZ
Nauczy się Pan/Pani obracać i przesuwać elementy w przestrzeni trójwymiarowej za pomocą funkcji transformacji 3D CSS.
Transformacje 3D: rotateX, rotateY, translateZ to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Wprowadzenie do transformacji 3D
Transformacje 3D w CSS rozszerzają system 2D o trzeci wymiar, wykorzystując oś Z. Włącz 3D za pomocą perspective na elemencie nadrzędnym oraz transform-style: preserve-3d dla zagnieżdżonych elementów 3D.
rotateX()
rotateX(angle) obraca element wokół poziomej osi X — podobnie jak odwracanie kartki w swoją stronę lub od siebie.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) obraca element wokół pionowej osi Y — podobnie jak obracanie drzwi na zawiasie.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) działa tak samo jak funkcja 2D rotate() — obraca element w płaszczyźnie ekranu.
rotate3d()
rotate3d(x, y, z, angle) obraca element wokół niestandardowego wektora osi 3D. Wartości x, y i z określają kierunek osi.
<div class="element">3D</div>translateZ()
translateZ() przesuwa element wzdłuż osi Z w stronę obserwatora lub od niego. Wartości dodatnie przybliżają element, a ujemne — oddalają.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) przesuwa element jednocześnie wzdłuż wszystkich trzech osi. Użycie translateZ(0) wymusza przeniesienie elementu na warstwę GPU — jest to często stosowana sztuczka zwiększająca wydajność.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) skaluje element w trzech wymiarach. scaleZ() skaluje głębię, co jest przydatne w przypadku ścian sześcianu 3D.
Przykład sześcianu 3D
Budowanie sześcianu za pomocą transformacji 3D zastosowanych do sześciu ścian:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Efekt paralaksy 3D
Użycie translateZ na elementach potomnych tworzy głębię w przewijanej scenie 3D (paralaksa CSS):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Akceleracja sprzętowa
Transformacje 3D, nawet tak proste jak translateZ(0), wymuszają umieszczenie elementu na osobnej warstwie GPU. Zapobiega to ponownemu malowaniu podczas animacji, ale zużywa pamięć GPU. Należy używać tego rozwiązania celowo, a nie jako uniwersalnej sztuczki.
Szybkie sprawdzenie
Jaka funkcja transformacji przesuwa element wzdłuż osi Z, czyli w stronę obserwatora lub od niego?
Podsumowanie
Transformacje 3D w CSS wykorzystują rotateX/Y/Z() do obracania wokół poszczególnych osi oraz translateZ() do przesuwania w głąb. Włącz prawdziwe 3D za pomocą perspective na elemencie nadrzędnym i transform-style: preserve-3d. Używaj backface-visibility: hidden w efektach obracania. Transformacje 3D wymuszają przeniesienie elementu na warstwę GPU, zapewniając płynną animację.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Transformacje 3D: rotateX, rotateY, translateZ” jest bezpłatna?
Tak — pełny tekst „Transformacje 3D: rotateX, rotateY, translateZ” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Transformacje 3D: rotateX, rotateY, translateZ”?
Nauczy się Pan/Pani obracać i przesuwać elementy w przestrzeni trójwymiarowej za pomocą funkcji transformacji 3D CSS. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Transformacje 3D: rotateX, rotateY, translateZ”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Translate, rotate i scale
- Transformacje skew i matrix
- Punkt odniesienia transformacji i perspektywa
- Transformacje 3D: rotateX, rotateY, translateZ