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.


 

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

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Obszar działalności
Tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel.: +48 780 060 995, pon. - czw. 8:00 - 16:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności

Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00