Transformacje

Wśród nowości wprowadzonych w kaskadowych arkuszach stylów 3 jest możliwość transformacji obiektów w dwóch (2D) i trzech (3D) wymiarach. Właściwości te pozwalają na zmianę kąta, położenia, czy wielkości obiektu.

{
height: ;
width: ;
position: relative; -jeśli pojedynczy obiekt 
          absolute; -jeśli opiera się na macierzystym
background-color: ;
transform-origin:x% y%;  - określenie położenie względem obiektu macierzystego ;
transform: rodzaj-transformacji(wartości);
}

{
transform:rotate(60deg);
}

Pierwszy przykład przedstawia transformacje obrotu obiektu o kąt 60 stopni

{
transform-origin:100% 100%;
transform:translate(-140px,10px);
}

Tutaj pokazana została transformacja wobec obiektu macierzystego, nie zamalowanego (origin). Jest to operacja przesunięcia na osi X i Y

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

Kolejny typ operacji transformacji obiektów w 2D, jest metoda wykrzywienia obiektu na osi X i Y

{
transform-origin:-370% -100%;
transform:scale(1.2,1.2);
}

Tutaj obiekt został wyskalowany, powiększony w stosunku do obiektu macierzystego (origin).

Kolejne typy operacji transformacji to transformacje 3D. Transformacje te pozwalają osiągnąć rezultaty takie jak w transformacji 2D plus kilka dodatkowych zarezerwowanych tylko dla trzech wymiarów.

{
transform-origin:100% 100%;
transform:rotateX(110deg);
}


{
transform-origin:100% 100%;
transform:rotateY(135deg);
}

Przedstawione powyżej operacje transformacji dotyczą obrotu, na dole na osi X, a po prawej na osi Y, obrót na osi Z daje takie sam efekty jak operacja obrotu na pierwszym przykładzie w 2D.

{
transform-origin:100% 100%;
transform: rotate3d(1,1,1,290deg);
}

Powyższa transformacja to również transformacja obrotu, tylko tym razem na jednym obiekcie dokonano obrotu na trzech osiach X, Y, Z o kąt 270 stopni.

{
perspective-origin: 100% 100%;
perspective:35px;
}

Ostatni przykład przedstawia transformacje względem perspektywy z jakiej widziany jest obiekt.

Do góry