CSS3 - transform:skew

CSS3 - transform:skew
Dodał pwimmer
sobota, 19 luty 2011 10:17
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).
1/1