Css3 Transformasi Skew()

Published by Concept Phone Kamis, 17 Januari 2019

skew() dipakai untuk membuat pengaruh condong pada elemen.

div {   -webkit-transform:skew(35deg, 35deg); /* Safari & Chrome */   -moz-transform:skew(35deg, 35deg);    /* Firefox         */   -ms-transform:skew(35deg, 35deg);     /* IE              */   -o-transform:skew(35deg, 35deg);      /* Opera           */   transform:skew(35deg, 35deg);         /* W3C             */ }

Poin pertama yaitu kecondongan terhadap sumbu-X, poin ke dua yaitu kecondongan terhadap sumbu-Y.
skew() juga sanggup dibagi menjadi dua:

• skewX(Ndeg)

• skewY(Ndeg)

div {   -webkit-transform:skewX(35deg);   -moz-transform:skewX(35deg);   -ms-transform:skewX(35deg);   -o-transform:skewX(35deg);   transform:skewX(35deg);   -webkit-transform:skewY(35deg);   -moz-transform:skewY(35deg);   -ms-transform:skewY(35deg);   -o-transform:skewY(35deg);   transform:skewY(35deg); }

transform:skewX(35deg);transform:skewY(35deg);

Secara default, menuliskan nilai skew() dengan derajat tunggal akan mempunyai arti yang sama dengan skewX:

transform:skewX(35deg) = transform:skew(35deg)

-webkit-transform:skew(15deg, 15deg);
-moz-transform:skew(15deg, 15deg);
-ms-transform:skew(15deg, 15deg);
-o-transform:skew(15deg, 15deg);
transform:skew(15deg, 15deg);

Sumber https://www.dte.web.id/