Przekształcić - CSS-Tricks

transformWłaściwość pozwala manipulować wizualnie element przez pochylanie, obracanie, tłumaczeniu, czy skalowanie:

.element ( width: 20px; height: 20px; transform: scale(20); )

Nawet przy zadeklarowanej wysokości i szerokości ten element zostanie teraz przeskalowany do dwudziestokrotnego rozmiaru pierwotnego:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Podanie tej funkcji dwóch wartości spowoduje rozciągnięcie jej w poziomie o pierwszą i w pionie o drugą. W poniższym przykładzie element będzie teraz dwukrotnie szerszy, ale połowę wysokości oryginalnego elementu:

.element ( transform: scale(2, .5); )

Lub możesz być bardziej szczegółowy bez używania funkcji skróconej:

transform: scaleX(2); transform: scaleY(.5);

Ale scale()to tylko jedna z wielu dostępnych funkcji przekształcania:

Wartości

• scale(): Wpływa na rozmiar elementu. Odnosi się to również do font-size, padding, heightoraz widthelementu, too. Jest to również skrócona funkcja dla funkcji scaleXi scaleY.
• skewX()i skewY(): Przechyla element w lewo lub w prawo, jak przekształcenie prostokąta w równoległobok. skew()to skrót, który łączy skewX()i skewYakceptuje obie wartości.
• translate(): Przesuwa element na boki lub w górę iw dół.
• rotate(): Obraca element zgodnie z ruchem wskazówek zegara od jego aktualnej pozycji.
• matrix(): Funkcja, która prawdopodobnie nie jest przeznaczona do ręcznego pisania, ale łączy wszystkie przekształcenia w jedną.
• perspective(): Nie wpływa na sam element, ale wpływa na transformacje transformacji 3D elementów potomnych, umożliwiając im wszystkim uzyskanie spójnej perspektywy głębi.

Krzywy

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Funkcje skewXi skewYtransformują przechylają element w jedną lub drugą stronę. Pamiętaj: nie ma skróconej właściwości do pochylania elementu, więc będziesz musiał użyć obu funkcji. W poniższym przykładzie możemy pochylić kwadrat 100px x 100px w lewo i w prawo za pomocą skewX:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Podczas gdy w tym przykładzie możemy pochylić element w pionie za pomocą skewY:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Teraz użyjmy, skew()aby połączyć te dwa:

Zobacz
skróconą właściwość Pen skew () autorstwa CSS-Tricks (@ css-tricks)
w CodePen.

Obracać się

.element ( transform: rotate(25deg); )

Obraca to element zgodnie z ruchem wskazówek zegara od jego pierwotnego położenia, podczas gdy wartość ujemna obraca go w przeciwnym kierunku. Oto prosty animowany przykład, w którym kwadrat obraca się o 360 stopni co trzy sekundy:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Możemy również użyć rotateX, rotateYi rotateZfunkcje, tak jak poniżej:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Tłumaczyć

.element ( transform: translate(20px, 10px); )

Ta funkcja transformacji przesuwa element na boki lub w górę iw dół. Dlaczego nie użyć po prostu górnego / lewego / dolnego / prawego? Cóż, czasami jest to trochę zagmatwane. Pomyślałbym o nich jako o układzie / pozycjonowaniu (i tak mają lepszą obsługę przeglądarki) i to jako sposób na przenoszenie tych rzeczy w ramach przejścia lub animacji.

Te wartości mogą mieć dowolną długość, np. 10 pikseli lub 2,4 em. Jedna wartość przesunie element w prawo (wartości ujemne w lewo). Jeśli podano drugą wartość, ta druga wartość przesunie ją w dół (wartości ujemne w górę). Lub możesz uzyskać szczegółowe:

transform: translateX(value); transform: translateY(value);

Ważne jest, aby pamiętać, że element używający transformnie spowoduje, że inne elementy będą go otaczać. Używając translateponiższej funkcji i wysuwając zielony kwadrat z pierwotnego położenia, zauważymy, że otaczający tekst pozostanie nieruchomy, tak jakby kwadrat był elementem blokowym:

Zobacz wyjaśnienie Pen Transform przez CSS-Tricks (@ css-tricks) w CodePen.

Warto również zauważyć, że translatezostanie przyspieszony sprzętowo, jeśli chcesz animować tę właściwość, w przeciwieństwie do position: absolute.

Wiele wartości

Za pomocą listy oddzielonej spacjami możesz dodać wiele wartości do transformwłaściwości:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Warto zaznaczyć, że istnieje kolejność, w jakiej te transformacje będą przeprowadzane, w powyższym przykładzie najpierw zostanie wykonane „pochylenie”, a następnie przeskalowany zostanie element.

Matryca

matrixFunkcja przekształcić mogą być wykorzystane do połączenia wszystkich przekształca się w jedno. To trochę jak transformacja stenograficzna, tyle że nie wierzę, że tak naprawdę ma być napisana ręcznie. Istnieją narzędzia, takie jak The Matrix Resolutions, które mogą przekształcić grupę przekształceń w pojedynczą deklarację macierzy. Być może w niektórych sytuacjach może to zmniejszyć rozmiar pliku, chociaż nieprzyjazne autorom mikro optymalizacje, takie jak ta, prawdopodobnie nie są warte twojego czasu.

Dla ciekawskich to:

rotate(45deg) translate(24px, 25px)

można również przedstawić jako:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Transformacje 3D

Większość z powyższych właściwości ma ich wersje 3D.

translate3d(x, y, z) translateZ(z)

Trzecia wartość w translate3dlub wartość w translateZprzesuwa element w kierunku widza, a wartości ujemne są dalej.

scale3d(sx, sy, sz) scaleZ(sz)

Trzecia wartość w scale3dlub wartość w scaleZwpływa na skalowanie wzdłuż osi z (np. Wyimaginowana linia wychodząca prosto z ekranu).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXi rotateYobróci element w przestrzeni 3D wokół tych osi. rotate3dumożliwia określenie punktu w przestrzeni 3D, w którym będzie obracany element.

matrix3d(… )

Sposób na programowe opisanie transformacji 3D w siatce 4 × 4. Nikt nigdy nie napisze żadnego z nich, nigdy.

perspective(value)

Ta wartość nie wpływa na sam element, ale wpływa na transformacje transformacji 3D elementów potomnych, dzięki czemu wszystkie mają spójną perspektywę głębi.

Więcej informacji

• Dokumenty MDN dotyczące przekształcania i użytkowania.
• Dokumentacja Davida DeSandro dotycząca transformacji 3D
• Surfin 'Safari: transformacje 3D
• Specyfikacja W3C dotycząca przekształceń CSS3
• Wprowadzenie do przekształceń CSS 3D

Wsparcie przeglądarki

Transformacje 2D

Chrom	Safari	Firefox	Opera	TO ZNACZY	Android	iOS
Każdy	3.1+	3.5+	10,5+	9+	4.1+	Co najmniej 4

Transformacje 3D

Chrom	Safari	Firefox	Opera	TO ZNACZY	Android	iOS
10+	4+	12+	Żaden	10+	4.1+	5+

Prefiksy dostawców

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )