Punkt odniesienia transformacji i perspektywa
Nauczy się Pan/Pani zmieniać punkt obrotu transformacji za pomocą transform-origin oraz dodawać głębię za pomocą perspective.
Punkt odniesienia transformacji i perspektywa to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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.
Domyślna wartość transform-origin
Domyślnie transformacje odbywają się względem środka elementu: 50% 50%. Właściwość transform-origin zmienia ten punkt obrotu.
Ustawianie transform-origin
Akceptuje słowa kluczowe, wartości procentowe lub długości. Format: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin ze scale
Skalowanie względem lewego górnego narożnika, przydatne podczas animowania rozwijania menu:
<div class="dropdown open">Dropdown menu</div>transform-origin z obrotem
Obracanie wskazówki zegara wokół jej podstawy:
<div class="clock"><div class="hand"></div></div>Właściwość perspective
perspective określa odległość między użytkownikiem a płaszczyzną z=0 dla transformacji 3D. Mniejsze wartości tworzą bardziej wyraziste zniekształcenie perspektywiczne, a większe — subtelną głębię.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Zmienia punkt zbiegu perspektywy. Domyślnie jest to środek (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective jako funkcja
perspective() może być również używana jako funkcja transformacji bezpośrednio na elemencie, a nie na jego elemencie nadrzędnym. Ogranicza to kontekst 3D wyłącznie do tego elementu.
<div class="card">Card</div>transform-style: preserve-3d
Domyślnie transformacje 3D elementów potomnych są spłaszczane do 2D. Ustaw transform-style: preserve-3d na elemencie nadrzędnym, aby zachować prawdziwe pozycjonowanie 3D elementów potomnych.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Efekt obracanej karty
Klasyczna obracana karta wykorzystująca perspective i preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden ukrywa tylną stronę elementu transformowanego w 3D. Jest niezbędna w przypadku obracanych kart, gdy tylna strona nie powinna być widoczna przez przednią.
Łączenie perspective i origin
Efekt dynamicznego przechylenia 3D po najechaniu kursorem, reagujący na jego położenie:
<div class="card demo-active">3D Tilt Card</div>Szybkie sprawdzenie
Menu rozwijane używa transform: scaleY(0) do ukrycia i scaleY(1) do pokazania. Jaki transform-origin sprawi, że będzie się rozwijać w dół od góry?
Podsumowanie
transform-origin zmienia punkt obrotu dla obrotów i skalowania — ma to kluczowe znaczenie przy rozwijaniu menu, wskazówkach zegara i przechyleniach po najechaniu. perspective na elemencie nadrzędnym tworzy kontekst głębi 3D. transform-style: preserve-3d umożliwia zagnieżdżone elementy 3D. backface-visibility: hidden ukrywa tylne strony elementów w efektach obracania.
Często zadawane pytania
Czy lekcja „Punkt odniesienia transformacji i perspektywa” jest bezpłatna?
Tak — pełny tekst „Punkt odniesienia transformacji i perspektywa” 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 „Punkt odniesienia transformacji i perspektywa”?
Nauczy się Pan/Pani zmieniać punkt obrotu transformacji za pomocą transform-origin oraz dodawać głębię za pomocą perspective. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Punkt odniesienia transformacji i perspektywa”?
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