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

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ść:

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>

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>

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>

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