Friday, January 20, 2012

CSS3 Transformasi skew()

skew() digunakan untuk menciptakan efek 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 adalah kecondongan terhadap sumbu-X, poin ke dua adalah kecondongan terhadap sumbu-Y.
skew() juga dapat 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);
}
CSS3 Transformasi skew()
transform:skewX(35deg);transform:skewY(35deg);

Secara default, menuliskan nilai skew() dengan derajat tunggal akan memiliki 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);

Labels: ,

1 Comments:

At Thursday, April 26, 2012 at 10:58:00 AM GMT+7, Blogger Unknown said...

Nah ini yang aku suka kerena masih newbie jadi css dululah baru nanti jquerynya... request mas tambah lagi CSSnya... :D

 

Post a Comment

<< Home