Tłumaczenie: Vlad Merzhevich

Skalowanie, pochylanie i obracanie dowolnego elementu jest możliwe dzięki właściwości transform CSS3. Jest obsługiwany przez wszystkie nowoczesne przeglądarki (z prefiksami) i umożliwia wdzięczną degradację, na przykład:

#myelement ( -webkit-transform: obrót (30 stopni); -moz-transform: obrót (30 stopni); -ms-transform: obrót (30 stopni); -o-transform: obrót (30 stopni); transform: obrót (30 stopni); )

Dobra rzecz. Obrócony jest jednak cały element – ​​jego zawartość, granice i obraz w tle. Co jeśli chcesz tylko skręcić zdjęcie w tle? Albo utrzymać tło na miejscu i obrócić element?

W3C nie ma obecnie propozycji przekształcenia obrazu tła. Byłoby to niezwykle przydatne, więc podejrzewam, że w końcu coś się pojawi, ale nie pomoże to programistom, którzy chcą dziś używać tego rodzaju efektów.

Na szczęście istnieje rozwiązanie. Zasadniczo jest to hack, który dodaje obraz tła do pseudoelementu :before lub :after, a nie do kontenera nadrzędnego. Pseudoelement może przekształcać się niezależnie.

Przekształć tylko tło

Kontener nie musi mieć żadnych stylów, ale musimy ustawić position: relative, ponieważ nasz pseudo-element znajduje się w środku. Ustaw również overflow: hidden , w przeciwnym razie tło wyjdzie poza kontener.

#myelement ( pozycja: względne; przepełnienie: ukryte; )

Teraz możemy stworzyć absolutnie pozycjonowany pseudoelement z przekształcalnym tłem. Właściwość z-index jest ustawiona na -1, co zapewnia wyświetlanie tła pod zawartością kontenera.

#myelement:before ( content: ""; pozycja: bezwzględna; szerokość: 200%; wysokość: 200%; góra: -50%; lewa: -50%; z-index: -1; background: url(background.png ) 0 0 powtórz; -webkit-transform: obróć (30 stopni); -moz-transform: obróć (30 stopni); -ms-transform: obróć (30 stopni); -o-transform: obróć (30 stopni); przekształć: obróć (30 stopni); ) ); )

Pamiętaj, że może być konieczne dostosowanie szerokości, wysokości i pozycji pseudoelementu. Na przykład, jeśli używasz powtarzającego się obrazu, obszar obrotu musi być większy niż sam kontener, aby całkowicie pasował do tła.

Naprawianie tła elementów transformowalnych

Wszelkie przekształcenia kontenera nadrzędnego dotyczą również pseudoelementów. Czyli musimy cofnąć transformację, np. jeśli pojemnik jest obrócony o 30 stopni, tło musi się obrócić o -30 stopni, aby znalazło się w stałej pozycji:

#myelement ( pozycja: względne; przepełnienie: ukryte; -webkit-transform: obrót (30deg); -moz-transform: obrót (30deg); -ms-transform: obrót (30deg); -o-transform: obrót (30deg) ; transform: rotate(30deg); ) #myelement:before ( content: ""; pozycja: bezwzględna; szerokość: 200%; wysokość: 200%; góra: -50%; lewy: -50%; z-index: - 1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o- przekształcenie: obrót (-30 stopni); przekształcenie: obrót (-30 stopni); )

Ponownie musisz dostosować rozmiar i położenie, aby tło pasowało odpowiednio do kontenera nadrzędnego.

Proszę, na przykład. Cały kod jest przechowywany w kodzie HTML.

Efekt działa w IE9, Firefox, Chrome, Safari i Opera. IE8 nie pokaże żadnych przekształceń, ale tło będzie.

IE6 i 7 nie obsługują pseudoelementów, więc tło zniknie. Jeśli jednak chcesz obsługiwać te przeglądarki, możesz dodać obraz tła do kontenera, a następnie ustawić go na brak za pomocą nowoczesnych selektorów lub komentarzy warunkowych.

Dziś przyjrzymy się tak wspaniałemu efektowi, który jest dla nas dostępny dzięki CSS3. To jest o o obracaniu bloku lub obrazu. Zadziwiająco pasuje do interfejsu witryny i po opanowaniu tej lekcji możesz zastosować ten efekt w swoich projektach.

Mamy więc zestaw klocków z pewną zawartością. Chcemy, aby klocek obracał się wokół własnej osi po najechaniu na niego i wyświetlał informacje z tyłu. Myślę, że wszyscy kiedyś grali w karty i wszyscy pamiętają ten ekscytujący moment, kiedy musieli wywrócić je do góry nogami. Teraz zrobimy to samo. Oto nasz oryginalny przykład:

Zacznijmy pisać nasz CSS. Pierwszą rzeczą, którą musimy zrobić, ponieważ pracujemy z transformacjami 3D, jest ustawienie odległości naszego obiektu od punktu widzenia. A oto pierwszy gówniany kod:

Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; )

Możesz ustawić dowolny inny numer. Eksperymentuj sam. Dla przedniej (.front) i tylnej (.back) części naszej karty do gry, musimy ustawić pozycjonowanie bezwzględne tak, aby "nachodziły" na siebie w końcowej pozycji. Musimy też zrobić tylna strona odwrócone elementy nie były wyświetlane podczas animacji. Pomoże nam w tym właściwość backface-visibility:

Przód, .back ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; height:100%; pozycja: bezwzględna; góra: 0; lewa: 0; )

Ustaw indeks Z dla przedniej strony (tak, aby znajdował się na górze w stanie domyślnym) i opisz domyślne kąty obrotu względem osi pionowej:

/* przednia strona umieszczona nad tylną stroną */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY( 0deg ); transform: rotateY (0deg); z-index: 2; ) /* back, początkowo ukryta strona */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform : obrót Y (180 stopni); -ms-transform: obrót Y (180 stopni); -o-transform: obrót Y (180 stopni); )

Po najechaniu nasze karty będą się obracać, kąty ich boków zmienią się z 0 na 180 stopni i ze 180 stopni na 0:

/* przednia strona umieszczona nad tylną stroną */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform : rotateY(180deg); -o-transform: rotateY(180deg); ) /* wstecz, początkowo ukryta strona */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz-transform: rotateY (0deg); -ms-transform: rotateY (0deg); -o-transform: rotateY (0deg); transform: rotateY (0deg); )

Jesteśmy blisko zakończenia naszej pracy. Pozostaje tylko wyjaśnić przeglądarce, jak elementy podrzędne powinny być wyświetlane w przestrzeni 3D. Ta właściwość musi być używana w połączeniu z właściwością transform i nosi nazwę transform-style . Właściwość tę należy zastosować do bloku z klasą .flipper, a nie do .back i .front , inaczej czeka nas niemiła niespodzianka w przeglądarce Opera.

Flipper ( -webkit-transform-style: zachowaj-3d; -moz-transform-style: zachowaj-3d; -ms-transform-style: zachowaj-3d; -o-transform-style:preserve-3d; styl transformacji: zachowaj-3d;)

Wow, zrobiliśmy to. Właśnie nauczyliśmy się obracać za pomocą CSS. Najlepsze jest to, że wszyscy to popierają. nowoczesne przeglądarki. Tak, użytkownicy Internet Explorer może również zobaczyć to piękno od wersji 10. Niestety w Rosji istnieje okrutna praktyka przeciągania szeregu przestarzałych IE8 i IE9. Dlatego mój klient chciał, aby podpowiedź była wyświetlana w starszych przeglądarkach w momencie najechania myszą. Zobaczmy, co możemy zrobić.

Pierwszą rzeczą, jaka przychodzi mi do głowy, jest użycie dyrektywy @supports. Moglibyśmy napisać:

@supports (transform-style: zachowaj-3d) lub (-moz-transform-style: zachowaj-3d) lub (-webkit-transform-style: zachowaj-3d) ( /* style dla przeglądarek obsługujących */ /* 3D przekształcenia */)

Niestety i ach, nawet IE 11 nic o tym nie wie, więc użyjmy staromodnego sposobu:

W pliku ie.css opiszemy style potrzebne do naszej podpowiedzi. Nie przyniosę go tutaj, bo. wykracza to poza zakres tego artykułu (i nie ma tam nic ciekawego). Możesz to zobaczyć w naszym przykładzie pionowej rotacji CSS, jeśli chcesz. Ale co, jeśli interesuje nas rotacja pozioma? W tym przypadku nasz kod jest przekształcany w następujący sposób:

Vertical.flip-container ( pozycja: względna; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213.5px; transform-origin: 100% 213.5px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); ) .vertical .back, .vertical.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180deg); przekształcenie: obrótX(180deg); )

Wizualny model formatowania CSS opisuje układ współrzędnych w każdym pozycjonowanym elemencie. Układ współrzędnych jest punktem odniesienia dla właściwości odsunięcia. Położenie i wymiary w tej przestrzeni współrzędnych można traktować jako dane w pikselach względem początku, z dodatnimi wartościami w prawo iw dół. Tę przestrzeń współrzędnych można zmienić za pomocą właściwości transform.

Przekształcenia CSS3 pozwalają na przesuwanie, obracanie i skalowanie elementów. Transformacje przekształcają element bez wpływu na inne elementy strony internetowej, tj. inne elementy nie poruszają się względem niego.

Do elementów, które mogą być transformowane należą elementy z wyświetlaniem: blok; i wyświetlacz: inline-block; , a także elementy, których wartość właściwości wyświetlania ma postać table-row , table-row-group , table-header-group , table-footer-group , table-cell lub table-caption . Element jest uważany za przekształcony, jeśli jego właściwość transform jest ustawiona na dowolną wartość inną niż none .

Istnieją dwa rodzaje przekształceń CSS3 − 2D I 3D. transformacje 2D przekształcać elementy w przestrzeni dwuwymiarowej za pomocą macierzy transformacji 2D. Ta macierz służy do obliczania nowych współrzędnych obiektu na podstawie wartości właściwości transform i transform-origin. Przekształcenia wpływają tylko na renderowanie wizualne. Jeśli chodzi o układ strony, mogą powodować przepełnienie treści bloku. Domyślnie punkt transformacji znajduje się w środku elementu.

Transformacje elementów 2D

Obsługa przeglądarki

TJ: 10,0, 9,0 -ms-
krawędź: 12.0
Firefox: 16,0, 3,5 -moz-
Chrom: 36,0, 4,0 -webkit-
safari: 9.0, 3.1 -webkit-
opera: 23.0, 15.0 -webkit-
Safari na iOS: 9, 7.1 -webkit-
Przeglądarka Androida: 53, 2.1 -webkit-
Chrome na Androida:-webkit-

1. Funkcje transformacji 2D transform

Właściwość określa typ transformacji elementu. Nieruchomość jest opisana za pomocą funkcje transformacji, które przesuwają element względem jego aktualnej pozycji na stronie lub zmieniają jego oryginalny rozmiar i kształt. Nie dziedziczone.

Prawidłowe wartości:

matrix() - dowolna liczba
translate() , translateX() , translateY() — jednostki długości (dodatnie i ujemne), %
scale() , scaleX() , scaleY() - dowolna liczba
rotate() - kąt (stopień, grad, rad lub zakręt)
skew() , skewX() , skewY() - kąt (stopnie, grad, rad)

Funkcjonować	Opis
Żaden	Wartość domyślna oznacza brak transformacji. Anuluje również transformację dla elementu z grupy transformowanych elementów.
macierz(a, c, b, d, x, y)	Odsuwa elementy i definiuje sposób ich przekształcania, umożliwiając połączenie wielu funkcji transformacji 2D w jedną. Obracanie, skalowanie, pochylanie i zmiana położenia są dozwolone jako przekształcenia. Wartość a zmienia skalę poziomą. Wartość od 0 do 1 zmniejsza element, więcej niż 1 go zwiększa. Wartość c deformuje (przesuwa) boki elementu wzdłuż osi Y, wartość dodatnia - w górę, wartość ujemna - w dół. Wartość b deformuje (przesuwa) boki elementu wzdłuż osi X, wartość dodatnia - w lewo, wartość ujemna - w prawo. Wartość d zmienia skalę pionową. Wartość mniejsza niż 1 zmniejsza element, więcej niż 1 go zwiększa. Wartość x przesuwa element wzdłuż osi x, dodatnia - w prawo, ujemna - w lewo. Wartość y przesuwa element wzdłuż osi Y, wartość dodatnia przesuwa się w dół, a wartość ujemna przesuwa go w górę.
przetłumacz(x,y)	Przesuwa element do nowej pozycji, przesuwając go z normalnej pozycji w prawo i w dół, używając współrzędnych X i Y, bez wpływu na sąsiednie elementy. Jeśli chcesz przesunąć element w lewo lub w górę, musisz użyć wartości ujemnych.
przetłumaczX(n)	Odsuwa element względem jego normalnej pozycji X.
przetłumaczY(n)	Przesuwa element względem jego normalnego położenia wzdłuż osi Y.
skala (x,y)	Skaluje elementy, powiększając je lub zmniejszając. Wartości od 0 do 1 zmniejszają element. Pierwsza wartość skaluje element na szerokość, druga na wysokość. Ujemne wartości odzwierciedlają element.
skalaX(n)	Funkcja skaluje element na szerokość, czyniąc go szerszym lub węższym. Jeśli wartość jest większa niż jeden, element staje się szerszy, jeśli wartość zawiera się w przedziale od jednego do zera, element staje się węższy. Wartości ujemne odwracają element w poziomie.
skala Y(n)	Funkcja skaluje element na wysokość, czyniąc go wyższym lub krótszym. Jeśli wartość jest większa niż jeden, element staje się wyższy; jeśli wartość zawiera się między jeden a zerem, jest niższy. Ujemne wartości odzwierciedlają element w pionie.
obróć (kąt)	Obraca elementy o określoną liczbę stopni, wartości ujemne od -1 stopni do -360 stopni obracają element przeciwnie do ruchu wskazówek zegara, wartości dodatnie obracają element zgodnie z ruchem wskazówek zegara. Wartość rotate(720deg) obraca element o dwa pełne obroty.
pochylenie (kąt x, kąt y)	Służy do deformowania (zniekształcania) boków elementu względem osi współrzędnych. W przypadku podania jednej wartości, druga zostanie określona automatycznie przez przeglądarkę.
pochylenieX(kąt)	Odkształca boki elementu wokół osi x.
pochylenie Y (kąt)	Odkształca boki elementu wokół osi Y.
Inicjał	Ustawia wartość właściwości na jej wartość domyślną.
dziedziczyć	Dziedziczy wartość właściwości z elementu nadrzędnego.

Składnia

Div ( -webkit-transform: obrót(360deg); -ms-transform: obrót(360deg); transform: obrót(360deg); )

Najedź myszką na bloki, aby zobaczyć, jak działają funkcje transformacji.

2. punkt początkowy transformacji

Właściwość pozwala na przesunięcie środka transformacji, względem którego zmienia się pozycja/rozmiar/kształt elementu. Wartość domyślna to center lub 50% 50% . Ustaw tylko dla przekształconych elementów. Nie dziedziczone.

Czasami nietypowe decyzje projektowe zmuszają projektanta layoutu do uciekania się do tych samych niestandardowych rozwiązań podczas układania tekstu. Na przykład obróć jeden z elementów tekstowych o określony kąt. W tym artykule omówimy kilka proste rozwiązania to zadanie.

Zastępowanie tekstu obrazem

Najbardziej prymitywnym rozwiązaniem tego problemu będzie użycie obrazu. Za pomocą znanego programu Adobe Photoshop tekst można łatwo obrócić pod dowolnym kątem. Jak rozumiesz, użycie tej metody nie wymaga dużej inteligencji.

W niektórych sytuacjach nie można użyć innej metody, ale w większości przypadków odchodzą od używania obrazu. Wynika to z szeregu wad towarzyszących tej technice:

• Niemożność skopiowania przez użytkownika informacji z określonego kontenera;
• Złożoność procedury dokonywania poprawek w części tekstowej elementu;
• Zwiększony ruch na serwerze witryny;
• Wzrost żądań do serwera podczas aktualizacji zasobu.

Pomimo tego, że było tak wiele negatywnych aspektów korzystania z obrazu, metoda ta ma kilka pozytywnych efektów.

• Kompatybilność z różnymi przeglądarkami– brak problemów podczas wyświetlania w różnych przeglądarkach.
• Wysoka umiejętność pozycjonowania obrazu.

Jednak w tym przypadku negatywne strony przeważać kogoś coś. Radzę poszukać innych rozwiązań.

Korzystanie z właściwości transformacji CSS

Zastosowanie tej metody jest znacznie większe w porównaniu z obrazem. Istotną różnicą jest elastyczność w edycji tekstu oraz możliwość zaznaczania i kopiowania zawartości obróconego kontenera. Główną przeszkodą w rozwoju tej techniki była kompatybilność z różnymi przeglądarkami. Do tej pory osiągnęliśmy na tym froncie całkiem dobre wyniki, co umożliwia bezproblemowe zastosowanie właściwości transform.

Istotą tej właściwości jest stopniowe dzielenie płaszczyzny. W rezultacie, po określeniu określonego kąta, pojemnik przyjmie odpowiednią pozycję. Należy zauważyć, że nieruchomość w czystej postaci nie jest stosowana. Powinny mu towarzyszyć właściwości dostawcy, które w rzeczywistości zapewniają wysoki wskaźnik zgodności z różnymi przeglądarkami.

Należy zauważyć, że to nie tekst wewnątrz bloku zmienia pozycję, ale sam blok, do którego właściwość jest adresowana za pomocą selektora klasy lub w inny sposób. Poniżej przykład zastosowania metody

Container ( - moz- transform: rotate(- 45deg) ; - webkit- transform: rotate(- 45deg) ; - o- transform: rotate(- 45deg) ; - ms- transform: rotate(- 45deg) ; transform: rotate( -45 stopni) ; )

W rezultacie otrzymujemy coś takiego:

Zwracam się do tej właściwości, projekt będzie wyświetlany bez problemów w przeglądarkach Firefox, Opera, Internet Explower i innych przeglądarkach webkit.

Dzwonienie przez Javascript

Istota procesu jest całkowicie podobna do tej rozważanej przed tą metodą. Aby go zaimplementować, potrzebujesz minimalnej znajomości kodu js, matematyki i zrozumienia filtra Matrix.

javascript

var deg2radiany = Matematyka. PI * 2 / 360 , stopnie = - 4 ; rad = deg * deg2radiany, costheta = matematyka. cos (rad) , sintheta = Matematyka. grzech(rad) ; jQuery(".rotatedBlock") . css((filtr: "progid:DXImageTransform.Microsoft.Matrix(M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ",SizingMethod="automatyczne rozwijanie", włączone=prawda)"} ) ;

W rezultacie otrzymamy w przeglądarce taki sam obraz, jak przy użyciu właściwości transform.

Nawet jeśli nie rozumiesz ani jednego znaku z tego wpisu, nie ma to znaczenia. Aby pracować z tym kodem, wystarczy zrozumieć, że wartość kąta jest zapisana w drugiej linii, zastępujesz ją sobie, reszta jest po prostu kopiowana bez zmian.

Funkcje korzystania z JavaScript i CSS

Te dwie metody mają kilka drobnych różnic w zasadzie działania, które są bardzo ważne, aby je poznać i wziąć pod uwagę.

Pierwsza różnica polega na różnicy między wysokością klocka a jego pozycją. Wyjście z sytuacji jest dość proste i polega na wykorzystaniu właściwości margin. Poprzez wcięcie ustawiamy klocek na żądanym poziomie i pozycji. Inne niespójności pozycjonowania można rozwiązać, przypisując blokowi bezwzględną wartość pozycji, co również działa skutecznie.

Bardziej złożone i niestandardowe podejście opiera się na wykorzystaniu właściwości transform-origin. Istota tej techniki zostanie opisana w kolejnych artykułach.

Kolejna różnica tkwi w istocie samej tury. Podczas korzystania z kodu js punkt obrotu znajduje się na krawędzi bloku. W drugiej metodzie ten punkt znajduje się w środku elementu. Aby ułatwić zrozumienie, spójrz na poniższy obrazek.

Własność transform CSS (od słowa „transformacja”) umożliwia modyfikowanie elementu na stronach html. Na przykład możesz

• obracać się
• Zmiana
• Powiększenie
• żargon
• połącz powyższe kroki

Dzięki tej właściwości możesz tworzyć ciekawe efekty bez użycia JavaScript, co pozwala przyspieszyć działanie przeglądarki. Należy również pamiętać, że możliwe jest połączenie efektu z opóźnieniami czasowymi.

1. Składnia przekształceń CSS

przekształcenie : przekształcenie1 [przekształcenie2];

Dozwolonych jest kilka czynności wykonywanych na obiekcie w tym samym czasie (na przykład obracanie, przesuwanie i zmiana skali).

Uwaga o przeglądarkach

Nie wszystkie przeglądarki obsługują transformację. Należy użyć prefiksów dostawcy CSS:

• -ms-transform - dla IE9 i starszych (poniżej wersji 9 transformacja nie jest obsługiwana)
• -webkit-transform - dla Chrome, Safari, Androida i iOS
• -o-transform - dla Opery przed wersją 12.10
• -moz-transform - dla Firefoksa do wersji 16.0

2. transform:rotate(x) - obrót obiektu

Aby obrócić element, jest polecenie rotate(x). Pozwala obrócić obiekt o x stopni zgodnie z ruchem wskazówek zegara lub przeciwnie do ruchu wskazówek zegara. Wartość x musi być podana w stopniach deg

Przykład 1. Obracanie obiektu w html poprzez transform

Примечание

Свойства:

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition . Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) - смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках - смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках - масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale ), вращение (rotate ) и перемещения (translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

• none - отсутствие преобразований (по умолчанию включено оно);
• matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
• translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
• scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
• rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
• rotateX(x) - 3d вращение по оси X;
• rotateY(x) - 3d вращение по оси Y;
• rotateZ(x) - 3d вращение по оси Z;
• perspective(n) - перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""

Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.