Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - transform:rotate

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 Obraca pojemnik wokół środka (w dwóch wymiarach)
Dziedziczenie nie
Wartości rotate(Ndeg) - N od 0 do 360 stopni
Wartość domyślna brak
Przykład transform : rotate (25deg)
Składnia JavaScript object.style.transform="rotate(25deg)"

Aby zdefiniować obrót, należy wpisać w definicji stylu transform:rotate(Ndeg). Wartość dodatnia kąta obraca pojemnik w prawo, wartość ujemna - w lewo

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

Pierwotne położenie:

Tekst

Obrót o 25 stopni:

<div style="transform:rotate(25deg); -webkit-transform:rotate(25deg); 
-moz-transform:rotate(25deg); -o-transform:rotate(25deg); 
width: 200px; height: 100px; background-color: olive">
<div style="padding:16px"><h1>Tekst</h1></div>
</div>

Tekst

Ze względu na to, że obracany pojemnik może nakładać się na elementy nad nim i pod nim, konieczne może być niekiedy użycie w nim dodatkowych marginesów (chyba że zależy nam na nałożeniu).

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