Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - transformacje

CSS3 - transform-origin

Email Drukuj PDF

Tematy: transform : translate | transform : translate3d | transform : rotate | transform : rotate3d | transform : scale | transform : scale3d | transform : skew | transform : matrix | transform : matrix3d | transform-origin | transform-style | perspective | perspective-origin | backface-visibility

Dane w pigułce
Zastosowanie Ustala punkt początkowy, od którego następuje transformacja
Dziedziczenie nie
Wartości left center right długość procent | top center bottom długość procent
Wartość domyślna 50% 50%
Przykład transform-origin: top left
Składnia JavaScript object.style.transformOrigin="top left"

Aby zdefiniować punkt początkowy transformacji, należy wpisać w definicji stylu transform-origin:wartość.

Żadna z przeglądarek nie obsługuje czystego kodu, Firefox wymaga użycia prefiksu -moz-, Chrome i Safari prefiksu -webkit-, natomiast Opera - prefiksu -o-.

Polecenie transform-origin służy do ustalenia punktu, wokół którego następuje transformacja, np. obrót, skalowanie czy pochylenie. Przykładowo, skalowanie następuje domyślnie od punktu początkowego, jakim jest środek pojemnika, ale za punkt początkowy przekształcenia możemy przyjąć prawy górny róg pojemnika czy środek dolnego brzegu. Obrót następuje domyślnie od środka pojemnika, ale możemy wybrać inne miejsce, np. prawy górny róg.

Dostępne wartości:

Dla osi X - left (lewy brzeg), center (środek), right (prawy brzeg), procent długości od lewej strony, odległość w pikselach od lewej strony.

Dla osi Y - top (górny brzeg), center (środek), bottom (dolny brzeg), procent długości od góry, odległość w pikselach od góry.

Podając top left wyznaczamy lewy górny róg, bottom wyznacza środek dolnego brzegu, bottom right wyznacza prawy dolny róg, 30% 30% wyznacza punkt w odległości 30% o lewego i od górnego brzegu pojemnika.

Poniżej prezentujemy przykłady. Statyczne ilustracje pokazują wynik przemiany za pomocą obrotu, pochylenia i skalowania, natomiast przykłady dynamiczne (z wykorzystaniem transition) ilustrują przemiany po przesunięciu kursora myszki nad pojemnik.

Obrót od środka pojemnika (center):

Przyklad statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Obrót od lewego górnego rogu pojemnika (top left):

Przyklad statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Pochylenie od środka prawego brzegu pojemnika (right):

Przykład statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Pochylenie od lewego dolnego rogu pojemnika (bottom left):

Przykład statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Skalowanie od środka dolnego brzegu pojemnika (bottom):

Przykład statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Skalowanie od środka pojemnika (center):

Przykład statyczny:

 

Przykład dynamiczny (przesuń kursor myszki nad pojemnik):

 

Interpretacja: Firefox (z prefiksem), Chrome (z prefiksem), Opera (z prefiksem).

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V