config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS transform

 

Definicja stylu, przeznaczenie i użycie transform

Styl transform stosuje transformację 2D lub 3D dla elementu. Umożliwia to skalowanie, obracanie, pochylanie, przesuwanie itp. rozmaitych elementów.

Przykład właściwości transform w praktyce

Obróć bordowy element div:

WITAJ!
Obróć:

transform: rotate(7deg);

 

Wartości właściwości transform

Wartość Opis
none Określa, że nie powinno być żadnej transformacji.
matrix(n,n,n,n,n,n) Określa transformację 2D przy użyciu macierzy sześciu wartości.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Określa transformację 3D przy użyciu macierzy 4x4 o 16 wartościach.
translate(x,y) Określa translację 2D.
translate3d(x,y,z) Określa translację 3D.
translateX(x) Określa translację, używając tylko wartości dla osi X.
translateY(y) Określa translację, używając tylko wartości dla osi Y.
translateZ(z) Określa translację 3D, używając tylko wartości dla osi Z.
scale(x,y) Określa transformację skali 2D.
scale3d(x,y,z) Określa transformację skali 3D.
scaleX(x) Określa transformację skali, podając wartość dla osi X.
scaleY(y) Określa transformację skali, podając wartość dla osi Y.
scaleZ(z) Określa transformację skali 3D, podając wartość dla osi Z.
rotate(angle) Określa obrót 2D, kąt jest określony w parametrze.
rotate3d(x,y,z,angle) Określa obrót 3D.
rotateX(angle) Określa obrót 3D wzdłuż osi X.
rotateY(angle) Określa obrót 3D wzdłuż osi Y.
rotateZ(angle) Określa obrót 3D wzdłuż osi Z.
skew(x-angle,y-angle) Określa transformację pochylenia 2D wzdłuż osi X i Y.
skewX(angle) Określa transformację pochylenia 2D wzdłuż osi X.
skewY(angle) Określa transformację pochylenia 2D wzdłuż osi Y.
perspective(n) Określa widok perspektywiczny dla przekształconego elementu 3D.
initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

 

Składnia CSS transform

transform: none | transform-functions | initial | inherit;

 

Wsparcie przeglądarek dla właściwości transform

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -ms- i -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość chrome edge firefox safari opera
transform (2D) 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 9.0
4.0 -webkit-
23.0
15.0 -webkit-

 

Przykładowe zastosowania z właściwością transform

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:
transform:

 
Rezultat:
myDIV
Kod CSS:
#myDIV {
background-color:lightblue;
transform:rotate(10deg);
}
 

 

Przykłady właściwości transform

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00