Comment on page
Przekształcanie elementów (transform)
Dzięki właściwości
transform możemy przekształcać nasze obiekty w różny sposób. Zajmiemy się przypadkami w przestrzeni 2D. Możliwe operacje to skalowanie (zwiększanie, zmniejszanie), przesuwanie po osi X i po osi Y, obrót oraz pochylenie.Przesuwanie wzdłuż osi X, czyli w prawo lub w lewo, to właściwość
translateX(wartość). W poniższym przykładzie element zostanie przesunięty o 150px w prawo. transform: translateX(150px);
Spróbujmy do naszej wartości dodać znak
-. W wyniku poniższej deklaracji element zostanie przesunięty o 150px w lewo. transform: translateX(-150px);
Przesuwanie wzdłuż osi Y, czyli w górę lub w dół, to właściwość
translateY(wartość). W poniższym przykładzie element zostanie przesunięty w górę o 150px. transform: translateY(150px);
Zaś w tym przykładzie, element przesunięty zostanie 150px w dół, gdyż przed wartością pojawił się znak
-. transform: translateY(-150px);
Dowolne elementy możemy obracać przy wykorzystaniu właściwości
rotate(wartość). Wartość podawana jest w stopniach (deg).Zobaczmy, co stanie się z kwadratem, do którego przypiszemy poniższą właściwość:
transform: rotate(45deg);
Jak widać, element został obrócony o 45 stopni.
Obroty mogą być dokonywane według trzech osi: X, Y i Z.
rotateX(45deg);
rotateY(45deg);
rotateZ(45deg);
Wybrany element możemy powiększać lub pomniejszać podając odpowiednie wartości we właściwości
transform: scale(wartość);
Wartości poniżej 1 będą pomniejszać element, zaś powyżej 1 – powiększać nasz obiekt. Obiekty od lewej posiadają wartości
scale(0.8), scale(1) i scale(1.2).Przy zastosowaniu pseudoklasy
:hover możemy tworzyć ciekawe efekty związane ze skalowaniem.kliknij!
.button-ch-anim-scale {
background-color: salmon;
padding: 20px 100px;
display: inline-block;
margin: 20px 0;
transition: all 0.3 ease-in-out;
}
.button-ch-anim-scale:hover {
transform: scale(1.2);
}
Skalowanie może się też odbywać tylko na wybranej osi. Służą do tego właściwości:
transform: scaleX(wartość);transform: scaleY(wartość);Pochylenie ("przekoszenie") elementu może wystepować na dwóch osiach: X i Y. Pochylenie na osi X definiujemy poprzez właściwość:
transform: skewX(wartość); zaś na osi Y: transform: skewY(wartość);. Wartość podawana jest w stopniach (deg).Elementy o właściwościach (od lewej)
skewX(10deg), skewX(0) i skewX(-10deg):Elementy o właściwościach (od lewej)
skewY(10deg), skewY(0) i skewY(-10deg):Przekształcenia mogą być kombinacją kilku operacji. Jeśli chcielibyśmy, aby nasz element przeskalował się i przesunął wzdłuż osi X, dodajemy do niego poniższą właściwość:
transform: scale(1.05) translateX(150px);Czyli połączenie operacji polega na wymienieniu ich w odpowiedniej kolejności, jedna po drugiej, oddzielonych spacją.
Last modified 3yr ago