Przekształcenia CSS 2D
Przekształcenia CSS 2D
Przekształcenia CSS umożliwiają przesuwanie, obracanie, skalowanie i pochylanie elementów.
Najedź myszą na element poniżej, aby zobaczyć transformację 2D:
W tym rozdziale poznasz następującą właściwość CSS:
transform
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Metody CSS 2D Transforms
Dzięki właściwości CSS transformmożesz użyć następujących metod transformacji 2D:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Wskazówka: o przekształceniach 3D dowiesz się w następnym rozdziale.
Metoda translate()
Metoda translate()przesuwa element z jego aktualnej pozycji (zgodnie z parametrami podanymi dla osi X i Y).
Poniższy przykład przenosi element <div> o 50 pikseli w prawo i 100 pikseli w dół od jego aktualnej pozycji:
Przykład
div
{
transform: translate(50px, 100px);
}
Metoda rotate()
Metoda rotate()obraca element zgodnie z ruchem wskazówek zegara lub przeciwnie do ruchu wskazówek zegara zgodnie z określonym stopniem.
Poniższy przykład obraca element <div> zgodnie z ruchem wskazówek zegara o 20 stopni:
Przykład
div
{
transform: rotate(20deg);
}
Użycie wartości ujemnych spowoduje obrót elementu w kierunku przeciwnym do ruchu wskazówek zegara.
Poniższy przykład obraca element <div> w kierunku przeciwnym do ruchu wskazówek zegara o 20 stopni:
Przykład
div
{
transform: rotate(-20deg);
}
Skala () Metoda
Metoda scale()zwiększa lub zmniejsza rozmiar elementu (zgodnie z parametrami podanymi dla szerokości i wysokości).
Poniższy przykład zwiększa element <div> do dwukrotności jego pierwotnej szerokości i trzykrotności jego pierwotnej wysokości:
Przykład
div
{
transform: scale(2, 3);
}
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);
}
Metoda scaleX()
Metoda scaleX()zwiększa lub zmniejsza szerokość elementu.
Poniższy przykład zwiększa element <div> do dwukrotności jego pierwotnej szerokości:
Przykład
div
{
transform: scaleX(2);
}
Poniższy przykład zmniejsza element <div> do połowy jego pierwotnej szerokości:
Przykład
div
{
transform: scaleX(0.5);
}
Metoda scaleY()
Metoda scaleY()zwiększa lub zmniejsza wysokość elementu.
Poniższy przykład zwiększa element <div> do trzykrotności jego pierwotnej wysokości:
Przykład
div
{
transform: scaleY(3);
}
Poniższy przykład zmniejsza element <div> do połowy jego pierwotnej wysokości:
Przykład
div
{
transform: scaleY(0.5);
}
Metoda skewX()
Metoda skewX()pochyla element wzdłuż osi X o podany kąt.
Poniższy przykład pochyla element <div> o 20 stopni wzdłuż osi X:
Przykład
div
{
transform: skewX(20deg);
}
Metoda skewY()
Metoda skewY()pochyla element wzdłuż osi Y o zadany kąt.
Poniższy przykład pochyla element <div> o 20 stopni wzdłuż osi Y:
Przykład
div
{
transform: skewY(20deg);
}
Metoda skew()
Metoda skew()pochyla element wzdłuż osi X i Y o podane kąty.
Poniższy przykład pochyla element <div> o 20 stopni wzdłuż osi X i 10 stopni wzdłuż osi Y:
Przykład
div
{
transform: skew(20deg, 10deg);
}
Jeśli drugi parametr nie jest określony, ma wartość zero. Poniższy przykład pochyla element <div> o 20 stopni wzdłuż osi X:
Przykład
div
{
transform: skew(20deg);
}
Metoda matrix()
Metoda matrix()łączy wszystkie metody transformacji 2D w jedną.
Metoda matrix() przyjmuje sześć parametrów, zawierających funkcje matematyczne, które umożliwiają obracanie, skalowanie, przesuwanie (tłumaczenie) i pochylanie elementów.
Parametry są następujące: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Przykład
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Właściwości transformacji CSS
W poniższej tabeli wymieniono wszystkie właściwości przekształcenia 2D:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
Metody transformacji 2D CSS
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |