CSS przekształcenia 2D

CSS przekształcenia 2D

CSS przekształcenia (transforms) pozwalają na ruch, obrót, skalowanie i pochylanie elementów.

Umieść palec na poniższym elemencie, aby zobaczyć przekształcenia 2D:

2D rotate

W tym rozdziale nauczysz się takich atrybutów CSS:

  • transform

Wsparcie przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.

Atrybut Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Metody 2D przekształceń CSS

Poprzez użycie CSS transform Atrybuty, które możesz użyć do 2D przekształceń, to:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Wskazówka:Nauczysz się o 3D przekształceniach w rozdziale poniżej.

Metoda translate()

Tłumaczyć

translate() Metoda przesuwa element od jego aktualnej pozycji (na podstawie podanych parametrów osi X i osi Y).

Poniższy przykład przesuwa element <div> w prawo o 50 pikseli i w dół o 100 pikseli od jego aktualnej pozycji:

Przykład

div {
  transform: translate(50px, 100px);
}

Spróbuj sam

Metoda rotate()

Obrotować

rotate() Metoda obraca element o podany kąt w lewo lub w prawo.

Poniższy przykład obraca element <div> w prawo o 20 stopni:

Przykład

div {
  transform: rotate(20deg);
}

Spróbuj sam

Użycie ujemnej wartości obraca element w lewo.

Poniższy przykład obraca element <div> w lewo o 20 stopni:

Przykład

div {
  transform: rotate(-20deg);
}

Spróbuj sam

Metoda scale()

Skalować

scale() Metoda zwiększa lub zmniejsza rozmiar elementu (na podstawie podanych parametrów szerokości i wysokości).

Poniższy przykład powiększa element <div> do dwukrotności jego pierwotnej szerokości i trójkrotności jego pierwotnej wysokości:

Przykład

div {
  transform: scale(2, 3);
}

Spróbuj sam

Poniższy przykład zmniejsza element <div> do połowy jego pierwotnej szerokości i wysokości:

Przykład

div {
  transform: scale(0.5, 0.5);
}

Spróbuj sam

Metoda scaleX()

scaleX() Metoda zwiększa lub zmniejsza szerokość elementu.

Poniższy przykład powiększa element <div> do dwukrotności jego pierwotnej szerokości:

Przykład

div {
  transform: scaleX(2);
}

Spróbuj sam

Poniższy przykład zmniejsza element <div> do połowy jego pierwotnej szerokości:

Przykład

div {
  transform: scaleX(0.5);
}

Spróbuj sam

Metoda scaleY()

scaleY() Metoda zwiększa lub zmniejsza wysokość elementu.

Poniższy przykład zwiększa element <div> do trzech razy jego oryginalnej wysokości:

Przykład

div {
  transform: scaleY(3);
}

Spróbuj sam

Poniższy przykład zmniejsza element <div> do połowy jego oryginalnej wysokości:

Przykład

div {
  transform: scaleY(0.5);
}

Spróbuj sam

Metoda skewX()

skewX() Metoda przesuwa element wzdłuż osi X o podany kąt.

Poniższy przykład przesuwa element <div> o 20 stopni wzdłuż osi X:

Przykład

div {
  transform: skewX(20deg);
}

Spróbuj sam

Metoda skewY()

skewY() Metoda przesuwa element wzdłuż osi Y o podany kąt.

Poniższy przykład przesuwa element <div> o 20 stopni wzdłuż osi Y:

Przykład

div {
  transform: skewY(20deg);
}

Spróbuj sam

Metoda skew()

skew() Metoda przesuwa element wzdłuż osi X i Y o podany kąt.

Poniższy przykład przesuwa element <div> o 20 stopni wzdłuż osi X, jednocześnie przesuwając go o 10 stopni wzdłuż osi Y:

Przykład

div {
  transform: skew(20deg, 10deg);
}

Spróbuj sam

Jeśli drugi parametr nie jest podany, jego wartość wynosi zero. Dlatego poniższy przykład przesuwa element <div> o 20 stopni wzdłuż osi X:

Przykład

div {
  transform: skew(20deg);
}

Spróbuj sam

Metoda matrix()

Obrotować

matrix() Metoda łączy wszystkie metody przekształceń 2D w jedną.

matrix() Metoda akceptuje sześć parametrów, w tym funkcje matematyczne, które pozwalają obracać, skalować, przesuwać (przesunięcie) i przechylać element.

Parametry takie jak: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Przykład

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Spróbuj sam

Atrybuty przekształceń CSS

Poniższa tabela zawiera wszystkie atrybuty przekształceń 2D:

Atrybut Opis
transform Zastosowanie 2D lub 3D przekształceń do elementu.
transform-origin Pozwalają zmieniać pozycję elementu poddawanego przekształceniom.

Metody 2D przekształceń CSS

Funkcja Opis
matrix(n,n,n,n,n,n) Definicja 2D przekształceń, używając macierzy sześciu wartości.
translate(x,y) Definicja 2D przekształceń, przesuwanie elementu wzdłuż osi X i Y.
translateX(n) Definicja 2D przekształceń, przesuwanie elementu wzdłuż osi X.
translateY(n) Definicja 2D przekształceń, przesuwanie elementu wzdłuż osi Y.
scale(x,y) Definiuje przekształcenie 2D skalowania, zmieniając szerokość i wysokość elementu.
scaleX(n) Definiuje przekształcenie 2D skalowania, zmieniając szerokość elementu.
scaleY(n) Definiuje przekształcenie 2D skalowania, zmieniając wysokość elementu.
rotate(kąt) Definiuje przekształcenie 2D obrotu, w zakresie podanych kątów.
skew(kąt-x,kąt-y) Definiuje przekształcenie 2D nachylenia, wzdłuż osi X i Y.
skewX(kąt) Definiuje przekształcenie 2D nachylenia, wzdłuż osi X.
skewY(kąt) Definiuje przekształcenie 2D nachylenia, wzdłuż osi Y.