Właściwość “translate()”
Poznaliśmy już podstawy przejść w CSS. Teraz poznasz właściwości, które można z nimi połączyć.
Na pierwszy ogień idzie wartość właściwości translate o nazwie translate().
translate(x,y) służy przemieszczaniu elementu zgodnie z podanymi parametrami w nawiasie (x – dla osi X, poziomej oraz y – dla osi Y, pionowej).
Przykładowo, chcemy przemieścić element o 100px w prawo i o 100px w dół. Kod będzie wyglądać następująco:
transform: translate(100px, 100px); Należy zapamiętać, że wartości ujemne na osi X przemieszczą element w lewo, a wartości ujemne na osi Y do góry.
Sprawdź poniższy przykład z zastosowaniem nowo poznanej wartości:
Wartość “rotate()”
Kolejną wartością właściwości transform którą poznamy jest rotate. Odpowiada ona za obrót elementu o ilość stopni podaną w parametrze.
Wartość wygląda następująco: transform: rotate(Xdeg) gdzie “x” to liczba stopni o które obracamy element, a “deg” to skrót od angielskiej wersji “degree” – stopień).
Przykładowo, właściwość:
transform: rotate(90deg); obróci element o 90 stopni w kierunku ruchu wskazówek zegara.
Dopuszczalnymi liczbami są również liczby ujemne np.:
transform: rotate(-45deg); Taka właściwość obróci element o 45 stopni w kierunku przeciwnym do ruchu wskazówek zegara.
Zobacz jak wartość “rotate” działa na elementach typu “button”:
Wartość “scale()”
Umiemy już przemieszczać i obracać elementy. Zobaczmy jak je skalować
Do tego potrzebujemy właściwości transform: scale(x); (gdzie x to liczba nieujemna).
Załóżmy, że chcemy powiększyć nasz element ponad dwukrotnie – musimy użyć do tego właściwości: transform: scale(2.5);.
Sprawdź wartość “scale()” na poniższym przykładzie:
Wartość “skewX()”
Wartość skewX() przekrzywia element wzdłuż osi X (poziomej). Element przekrzywiamy używając stopni. Przykładowo chcąc przekrzywić element o 20 stopni wzdłuż osi X użyjemy następującej właściwości: transform: skewX(20deg);.
Spójrz na poniższy przykład z zastosowaniem powyższej wartości:
Wartość “skewY()”
Wartość skewY jest kolejną wartością z rodziny skew. W tym przypadku, przekrzywia ona element w wzdłuż osi Y.
Jednostką którą używamy do określenia przekrzywienia to stopnie (deg). Przykład: transform: skewY(50deg);. Tak zbudowana właściwość przekrzywi element o 50 stopni wzdłuż osi Y.
Spójrz na poniższy przykład z zastosowaniem powyższej wartości:
Wartość “matrix()”
matrix() łączy wszystkie pozostałe właściwości w jedną. Wzorem takiej właściwości jest:matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) Jeżeli chcemy nadać elementowi następujące właściwości: przekrzywić element względem osi X i Y, przesunąć element o 30px po osi X i przesunąć element o 10px po osi Y. Standardowo zrobilibyśmy to przy użyciu czterech właściwości. A można jedną: matrix(1, 0.03, 0.03, 1, 30, 10)
Zobacz na poniższym przykładzie jaki wynik zobaczysz po połączeniu kilku wartości:
Wartość “transform-origin”
Wszystkie transformacje zachodzą względem środka obiektu. Przebiega tak, ponieważ jego punkt źródłowy (czyli domyślna wartość transform-origin) znajduje się w miejscu o współrzędnych 50% 50%.
Na położenie tego punktu składają się dwie wartości – wartość osi X oraz wartość osi Y.
Współrzędna dla osi X może przyjmować następujące wartości: left, center, right, %.
Współrzędna dla osi Y może przyjmować następujące wartości: top, center, bottom, %.
Przykładowy kod może wyglądać następująco: transform-origin: 50% 0%;. W tym przypadku punkt źródłowy elementu przemieściliśmy do połowy szerokości jego górnej krawędzi.
Spójrz na poniższy przykład z zastosowaniem powyższej wartości:
Dobrnęliśmy do końca transformacji 2D. Przede wszystkim powyższe wartości przydają się do wizualnego stylowania elementów takie jak przyciski czy elementy graficzne czy też tekstowe.
W kolejnym materiale zajmę się transformacjami 3D. Powodzenia w kodowaniu!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA