transform-origin
Ustawia punkt, wokół którego element się obraca i względem którego się skaluje.
- Wartość domyślna
50% 50% 0- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.transformOrigin = "top left"
Przykład
#.progress-bar {
transform: scaleX(0.7);
transform-origin: left;
}<div style="height: 10px; border-radius: 99px; background: #262626; overflow: hidden;">
<div class="progress-bar" style="height: 100%; background: linear-gradient(90deg, #7c3aed, #0ea5e9); transform: scaleX(0.7); transform-origin: left;"></div>
</div>
<p style="margin: 8px 0 0; color: #a3a3a3;">70% modułu ukończone</p>Definicja i zastosowanie
#Właściwość transform-origin wyznacza środek transformacji. Domyślnie to środek elementu, więc obrót kręci element wokół jego centrum, a skalowanie powiększa go równo we wszystkich kierunkach.
Przeniesienie punktu do rogu całkowicie zmienia efekt: obrót wokół lewego górnego rogu działa jak otwieranie drzwi na zawiasie, a skalowanie od dołu sprawia, że element rośnie w górę.
Przyjmuje słowa kluczowe (top, left, center…), procenty i długości. Trzecia wartość ustawia przesunięcie w osi Z dla transformacji 3D.
Składnia
#transform-origin: <x> <y>? <z>?;Wartości
#- Obrót wokół środka elementu.
- Obrót wokół lewego górnego rogu.
- Obrót wokół prawego dolnego rogu.
poza elementem
Punkt obrotu pod elementem, jak wahadło.
Wartości w praktyce
#center
.demo { transform-origin: center; }top left
.demo { transform-origin: top left; }bottom right
.demo { transform-origin: bottom right; }50% 150%
.demo { transform-origin: 50% 150%; }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
#- Paski postępu animowane przez
scaleX()potrzebujątransform-origin: left, inaczej rosną od środka. - Menu rozwijane z przycisku wyglądają naturalniej, gdy skalują się od miejsca, z którego wychodzą, np.
top right.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.