Przekształć CSS: Teoria i przykłady transformujących się obiektów

Trzecia wersja kaskadowych arkuszy stylów wprowadziła nowe właściwości 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. Ten ostatni jest wart wspomnienia bardziej szczegółowo. Jeśli wcześniej, aby stworzyć iluzję ruchu, do stron zostały dodane pliki gif, które musiały zostać specjalnie narysowane, a teraz atrybut przekształcania CSS automatycznie wykonuje wszystkie działania związane z animacją obiektów. Pozostaje nauczyć się z niego korzystać.

Cechy nieruchomości

Zwykle podczas przekształcania myszy używa się obiektów. Jest ustawiony dla pseudo klasy o nazwie : hover . Zmiany dotyczą tylko jednego elementu strony internetowej, bez wpływu na resztę.

Rozważany parametr stylów jest często mylony z innym - transformacja tekstu . CSS wyraźnie rozróżnia te atrybuty. Drugi definiuje styl pisania tekstu i odnosi się tylko do akapitów strony internetowej, podczas gdy transformacja w czystej postaci jest używana dla wszystkich elementów.

Możesz dodać do dowolnego obiektu:

• poruszanie się po linii prostej (poziomej, pionowej, po przekątnej);
• obrót (specjalny przypadek - pochylenie);
• skalowanie;
• kombinacja wymienionych efektów.

Oprócz iluzji ruchu trzech typów, właściwość pozwala ustawić refleks, przesunięcie i perspektywę. Dla zaawansowanych parametr podaje się w postaci macierzy.

Transformacja jest przeprowadzana względem środka elementu. W razie potrzeby punkt odniesienia zostanie przesunięty. Parametr pochodzenia transformacji: a b c przesuwa środek obiektu względem trójwymiarowego układu współrzędnych xyz .

Ruch poziomy

Najprostszym rodzajem ruchu jest poziomo, to znaczy lewo-prawo lub wzdłuż osi x . Aby to ustawić, użyj wartości właściwości translate ( x, y) .

Ponieważ element musi poruszać się tylko w jednym kierunku, współrzędna y jest ustawiona na y = 0. Ale współrzędnej x należy przypisać określoną wartość w pikselach, o którą obiekt powinien zostać przesunięty. Wartość ujemna - ruch w lewo, dodatni - w prawo.

Ale zwykłe określenie transformacji CSS nie stworzy iluzji ruchu. Rozwiązaniem jest dodanie atrybutu przejścia do opisu obiektu. Przykład działania dla przesunięcia elementu o 125 pikseli w prawo pokazano poniżej.

Kod przejścia linii : wszystkie 2 s ułatwiają :

• all - ustawiona wartość jest stosowana do wszystkich parametrów obiektu;
• 2 s - czas trwania efektu 2 sekundy;
• łagodność - powolny ruch na początku i na końcu.

Przesuń 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. Przesunięcie w górę jest wartością ujemną, w dół jest wartością dodatnią.

Właściwość CSS transformacji dla klasy up w poniższym przykładzie demonstruje płynny ruch obiektu z punktu o współrzędnych (0; 0) 80 pikseli w górę. Klasa dół określa przeciwny kierunek ruchu - 80 pikseli w dół.

Animacja w przykładzie jest wykonywana ze stałą prędkością, na co wskazuje wartość liniowa .

Ruch po przekątnej

Jeśli połączysz rozważane ruchy zdefiniowane przez transformację, przykłady CSS dla ruchu po przekątnej są uzyskiwane po prostu.

Atrybut ustawia wartości dla obu współrzędnych. Odległość odsunięcia jest podana w pikselach. Miejsce, w którym obiekt się porusza, zależy od znaków. Możliwe są cztery opcje:

• x , y positive - przesuń w dół w prawo;
• x , y negative - przesuń w lewo;
• x - dodatni, y - ujemny - ruch w górę w prawo;
• x - ujemny, y - pozytywny - przesuń w lewo.

Przykład pomoże z funkcjami przekształcania CSS.

Jeśli przesunięcie wzdłuż obu osi jest wykonywane przez tę samą liczbę pikseli (na przykład 32), wystarczy podać jedną liczbę. Oznacza to, że tłumaczenie (32) odpowiada tłumaczeniu (32, 32).

Rotacja

Po rozważeniu możliwych sposobów przemieszczenia, przechodzimy do następnego rodzaju transformacji - rotacji. Rotacja ustala wartość dokumentu (Xdeg) , gdzie X to stopnie (od 0 do 360), o które obiekt odstaje od swojej pierwotnej pozycji.

Pozostaje zrozumieć kierunek obrotu. Rodzaj obrotu określają znaki: plus - zgodnie z ruchem wskazówek zegara, minus - przeciw. W razie potrzeby można połączyć oba rodzaje rotacji - patrz przykład poniżej.

Zmiana rozmiaru

Następująca wartość dodaje skalowanie elementu: scale ( a , b ) . Litery w nawiasach oznaczają szerokość i wysokość obiektu. Jeśli chcesz trzy razy zwiększyć rozmiar proporcjonalnie, wystarczy napisać skalę (3) . Zmniejsz wymiary liczby mniejszej niż jeden.

Atrybut atrybutów CSS atrybutu t ransform może być zastosowany tylko do skali poziomej X lub tylko do skali pionowej Y. Interesujące efekty odbicia i cienia uzyskuje się, jeśli dla skali Y podane są wartości ujemne.

Transformacja tekstu

Początkujący myliją właściwość transformacji z atrybutem tekstowego przekształcania tekstu CSS. Pamiętaj, że ten parametr dotyczy tylko tekstu. Służy do kontrolowania przypadku pisania akapitu znaków. Na przykład, po instalacji małej litery, tekst jest konwertowany na małe litery, wielkie litery - na wielkie litery (np. Naciskając klawisz CapsLock na klawiaturze). Aby słowa zaczynały się od dużej litery, właściwość jest przypisywana do wielkich liter .

W przeciwieństwie do transformacji obiektu, transformacja tekstu obsługuje mechanizm dziedziczenia. Konwersja znaków jest przypisywana do klas odpowiedzialnych za wyświetlanie nagłówków, co jest wygodne w praktyce, ponieważ nie ma potrzeby monitorowania metody zapisu. W każdym wariancie pisowni wszystkie bloki tekstu pojawią się na stronie internetowej w ten sam sposób.