Trzecia wersja Kaskadowych Arkuszy Stylów wniosła nowe właściwości do obiektów stron internetowych. Jest to możliwość tworzenia bloków z wygładzonymi narożnikami, dostosowywania cieni, dodawania przezroczystości i gradientu, ustawiania animacji. Warto wspomnieć o tym drugim. Jeśli wcześniej, aby stworzyć iluzję ruchu na stronach dodanych plików gif, które były niezbędne do dostosowania, to teraz transformacja atrybutów CSS automatycznie wykonuje wszystkie działania związane z animacją obiektów. Pozostaje nauczyć się z niego korzystać.

Specyfika stosowania właściwości

Zwykle transformacja obiektów odwołuje się do myszy znajdującej się na nich. Podaje się ją dla pseudoklasy o nazwie: hover. Zmiany dotyczą tylko jednego elementu strony internetowej bez wpływu na innych. Omawiany parametr stylu jest często mylony z innym - transformacja tekstu. CSS wyraźnie ogranicza te atrybuty. Ten ostatni określa styl pisania tekstu i odnosi się tylko do akapitów strony internetowej, podczas gdy transformacja w jego czystej postaci jest używana dla wszystkich elementów.

Do dowolnego obiektu można dodać:

poruszanie się po linii prostej (poziomej, pionowej, ukośnej);

kolei (specjalny przypadek - pochylenie);

skalowanie;

połączenie tych efektów.

Oprócz iluzji ruchu trzech typów, właściwość pozwala określić odbicie, stronniczość i perspektywę. Dla parametru zaawansowanego jest on podany w postaci macierzy. Transformacja jest przeprowadzana względem środka elementu. Jeśli to konieczne, punkt odniesieniaprzesunięty Parametr pochodzenia transformacji: a b c przesuwa środek obiektu względem trójwymiarowego układu współrzędnych xyz.

Ruch poziomy

Najprostsza forma przemieszczania się w poziomie, to znaczy w lewo i w prawo wzdłuż osi X. Do jego zadania używana jest wartość właściwości translate (x, y). Ponieważ element musi poruszać się tylko w jednym kierunku, współrzędna y jest ustawiona na 0. Jednak współrzędnej X należy przypisać określoną wartość w pikselach, do której obiekt musi zostać przesunięty. Wartość ujemna - ruch w lewo, dodatni - w prawo. Ale proste wskazanie transformacji CSS nie stworzy iluzji ruchu. Rozwiązaniem jest dodanie atrybutu przejścia do opisu obiektu. Przykład działania dla przesunięcia elementu na prawo od 125 pikseli pokazano poniżej.

Linia kodu przejściowego: wszystkie 2 s ułatwiają wyjście:

all - ustawiona wartość odnosi się do wszystkich parametrów obiektu;

2 s - czas trwania efektu wynosi 2 sekundy;

łatwość wchodzenia - w zwolnionym tempie na początku i na końcu.

Przesuń w górę /w dół

Wartość translate (x, y) służy do ustawiania animacji w pionie. W tym przypadku współrzędna x jest równa zero, a y ma przypisaną wartość przesunięcia. Ruch w górę - ujemny, w dół - pozytywny. Właściwość transformacji CSS dla klasy up w poniższym przykładzie demonstruje płynny ruch obiektu od punktu współrzędnych (0; 0) o 80 pikseli w górę. Klasa down określa ruch przeciwny do kierunku ruchu - o 80 pikseli w dół. Animacja w przykładzie jest wykonywana ze stałą prędkością, jak wskazuje wartość liniowa.

Kurs po przekątnej

Łącząc transformacje rozpatrywane przez transformację, przykłady CSS dla ruchu po przekątnej są proste. W atrybucie wartości są ustawione dla obu współrzędnych. Przesunięcie odległości podawane jest w pikselach. Gdzie obiekt się poruszy - zależy to od postaci. Istnieją cztery możliwe opcje:

x, y pozytyw - ruch w dół;

x, y minus - ruch do góry nogami;

x - pozytywny, y - ujemny - ruch w górę;

x - ujemny, y - pozytywny - ruch w lewo.

Przezwyciężenie cech transformacji CSS pomoże w przy- kładzie. Jeżeli odchylenie jest wykonywane na tej samej liczbie pikseli (np. 32), wystarczy wskazać pojedynczą liczbę. Oznacza to, że tłumaczenie translateodpowiada translate (3232).

Obrót

Po rozważeniu możliwych sposobów poruszania, przechodzimy do następnego rodzaju transformacji - rotacji. Obrót powoduje ustawienie wartości (Xdeg), gdzie X - stopnie (od 0 do 360), do którego obiekt odstaje od pierwotnej pozycji.
Pozostaje zrozumieć kierunek obrotu. Rodzaj obrotu jest określany przez znaki: plus - zgodnie z ruchem wskazówek zegara, minus - vs. W razie potrzeby można połączyć oba rodzaje rotacji - patrz przykład poniżej.

Zmiana rozmiaru

Ta wartość dodaje skalowanie elementu: scale (a, b). Litery w nawiasach to szerokość i wysokość obiektu. Jeśli chcesz zwiększyć rozmiar proporcjonalnie do trzech razy, wystarczy napisać skalę
. Zmniejsz wymiary liczby mniejszej niż jeden. Atrybut CSS t ransform można zastosować tylko do skali X lub tylko dopionowa - skala Y Interesujące efekty odbicia i cienia wyjdą, jeśli podane zostaną wartości ujemne dla skali Y.

Transformacja tekstu

Nowo przybyli mylić rozważaną właściwość transformacji z atrybutem CSS przekształcania tekstu. Przypominamy, że ta opcja dotyczy tylko tekstu. Kontroluje charakter akapitu postaci. Na przykład po wpisaniu małych liter tekst jest konwertowany na małe litery, wielkie litery - wielkimi literami (podobnie jak klawisz CapsLock na klawiaturze). Aby słowa zaczynały się od wielkich liter, właściwości są przypisywane do wielkich liter. W przeciwieństwie do transformacji obiektów, transformacja tekstu wspiera mechanizm dziedziczenia. Transformacje symboli są przypisywane do klas odpowiedzialnych za wyprowadzanie nagłówków, co jest praktyczne w praktyce, ponieważ nie ma potrzeby monitorowania metody zapisu. Przy każdej pisowni wszystkie bloki tekstu będą wyświetlane na stronie w ten sam sposób.