Tak jak obiecałem, dziś kolejna część “kursu” przygotowującego do egzaminu MCSD: 70-480. W niniejszym poście, transformacje CSS3 pozwalające na zmianę rozmiaru, kształtu i położenia elementów HTML5. Dziś skupimy się tylko podstawowych możliwościach tego “ficzera” CSS3 (konkretnie na transformacjach 2D), ponieważ temat ten, będzie dużo dokładniej omówiony później, w części poświęconej animacjom. Większość swojego wpisu oparłem na tym co można znaleźć na stronach w3schools.com.

A więc zaczynamy!

Transformacje 2D

Transformacje CSS3 są to przekształcenia powodujące zmianę położenia, kształtu bądź rozmiaru elementów HTML. Możemy tego dokonywać w dwóch lub trzech wymiarach, jednak w tym poście skupimy się jedynie na tych pierwszych.

Do utworzenia transformacji wykorzystywana jest właściwość ‘transform’. Niestety nie działa to wprost we wszystkich przeglądarkach - najpopularniejsze z nich akceptują tę właściwość z odpowiednim przedrostkiem. i tak:

  • dla Internet Explorer 9 jest to przedrostek ‘-ms-‘
  • dla Firefox jest to przedrostek ‘-moz-‘
  • dla Chrome i Safari jest to ‘-webkit-‘
  • dla Opery jest to przedrostek ‘-o-‘

Aby nasza transformacja działała tak jak oczekujemy we wszystkich popularnych przeglądarkach internetowych, musimy więc niestety, oprócz odpowiedniej definicji dla standardowej właściwości ‘transform’, powtórzyć tą samą deklaracje ze wszystkimi wymienionymi przedrostkami. Zobaczymy to zresztą w przykładach.

Metoda translate

Stosując tę metodę, możemy uzyskać przesunięcie o zadaną liczbę pixeli w osiach X oraz Y. Przykład:

div {
    transform: translate(50px,50px);
    -ms-transform: translate(50px,50px); /* Internet Explorer 9 */
    -webkit-transform: translate(50px,50px); /* Safari i Chrome */
    -o-transform: translate(50px,50px); /* Opera */
    -moz-transform: translate(50px,50px); /* Firefox */
}

Tak jak wspomniałem wcześniej, na początku mamy standardową definicję transformacji, a następnie jej powtórzenie z wszystkimi dostępnymi przedrostkami. Jak widać, mamy tutaj przesunięcie elementu o 50px, w osi X oraz Y (w prawo i dół - jeśli chcesz przesunąć w przeciwnych kierunkach, użyj wartości ujemnych).

Metoda translate ma też dwie “okrojone” wersje: ‘translateX’ oraz ‘translateY’, które powodują translację tylko wobec jednej z dwóch płaszczyzn.

Metoda rotate

Jak sama nazwa wskazuje, metoda ta służy do obracania elementu wokół własnej osi. Przykład:

div {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* Internet Explorer 9 */
    -webkit-transform: rotate(90deg); /* Safari i Chrome */
    -o-transform: rotate(90deg); /* Opera */
    -moz-transform: rotate(90deg); /* Firefox */
}

W powyższym przypadku mamy do czynienia z obrotem o 90 stopni zgodnie z ruchem wskazówek zegara, jeśli chcielibyśmy obrócić w przeciwnym kierunku, należy użyć wartości ujemnych.

Metoda scale

Tutaj, do czynienia mamy z możliwością proporcjonalnej zmiany rozmiaru elementu (skalowaniu). Przykład:

div {
    transform: scale(2,3);
    -ms-transform: scale(2,3); /* Internet Explorer 9 */
    -webkit-transform: scale(2,3); /* Safari i Chrome */
    -o-transform: scale(2,3); /* Opera */
    -moz-transform: scale(2,3); /* Firefox */
}

Jako, że mamy do czynienia ze zmianą proporcjonalną, jako parametry podajemy mnożnik dla osi X oraz Y - w powyższym przypadku, szerokość elementu zostanie zwiększona dwukrotnie, a wysokość trzykrotnie.

Ta metoda posiada również wersje pozwalająca na transformację wobec tylko jednej z osi: ‘scaleX’ oraz ‘scaleY’.

Metoda skew

Ta metoda jest trochę trudna do wytłumaczenia słowami ;) Generalnie chodzi o przesunięcie o zadany kąt ale osobno wobec poszczególnych osi. Najlepiej poeksperymentować z tym na stronie TryIt na w3schools.com. Poniżej przykład:

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* Internet Explorer 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari i Chrome */
    -o-transform: skew(30deg,20deg); /* Opera */
    -moz-transform: skew(30deg,20deg); /* Firefox */
}

Ogólnie rzecz biorąc, powyższy przykład powoduje obrót o 30 stopni tylko wokół osi X a następnie o 20 stopni wobec osi Y.

Ta metoda posiada również wersje pozwalającą na obrót wokół jednej z dostępnych osi: ‘skewX’ oraz ‘skewY’.

Metoda matrix

Dobrnęliśmy do ostatniej z metod - jest ona najbardziej skomplikowana. Przyjmuje sześć parametrów, z czego pierwsze cztery stanowią wartości macierzy transformacji liniowej, a dwa ostatnie to parametry translacji. Jak można się domyślić, pozwala ona na najbardziej “pokręcone” transformacje, jednak wymaga większej wiedzy matematycznej, by te transformacje wyliczyć. Więcej szczegółów na temat tej metody można znaleźć chociażby na stronie dev.opera.com. Przykład dla porządku:

div {
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Internet Explorer 9 */
    -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari i Chrome */
    -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Powyższy przykład powoduje ten sam efekt jak metoda ‘rotate(30deg)’ - poeksperymentować można oczywiście na w3schools.com.

Transformacje CSS3 - podsumowanie

I tak to właśnie przedstawiają się transformacje CSS3 - było to tylko liźnięcie tematu ale tak jak napisałem na początku, do poważniejszych transformacji jeszcze dojdziemy na drodze do zdania egzaminu MCSD 70-480 ;)