Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - transform:skew

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 Pochyla pojemnik (w dwóch wymiarach)
Dziedziczenie nie
Wartości skew(Ndeg,Mdeg)
Wartość domyślna brak
Przykład transform : skew (20deg,30deg)
Składnia JavaScript object.style.transform="skew(20deg,30deg)"

Aby zdefiniować pochylenie, należy wpisać w definicji stylu transform:skew(Ndeg,Mdeg). Pochylane są kolejno lewy bok i górny bok.

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

Pierwotna wielkość:

Tekst

Pochylanie o 20 i 30 stopni:

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

Tekst

Pochylanie o 20 i -10 stopni:

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

Tekst

Pochylanie o -15 i 0 stopni:

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

Tekst


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