Efek CSS3 Transform

CSS3 Transform - Bisa kita gunakan untuk memutar Objek pada sudut tertentu dengan Transform Rotate , memperbesar Objek dengan Transform Scale atau juga membuat miring Objek dengan Transform Skew. Langsung saja kita praktekkan agar lebih jelas.

CSS3 Transform Rotate

-moz-transform: rotate(4deg) ;
-webkit-transform:  rotate(4deg)  ;
-o-transform: rotate(4deg) ;
-ms-transform: rotate(4deg);
transform:rotate(4deg);

Contoh CSS3 Rotate

Keterangan : 4deg menunjukkan besar nilai jika ingin memutar kearah kiri gunakan nilai negatif seperti ini -4deg.

Contoh CSS3 Rotate

CSS3 Transform Scale

-moz-transform: scale(2) ;
-webkit-transform: scale(2) ;
-o-transform: scale(2) ;
-ms-transform: scale(2) ;
transform: scale(2) ;

Contoh CSS3 Scale

Keterangan : 2 semakin besar nilainya maka akan semakin besar perbesarannya , efek ini biasanya terlihat jika menggunakan Hover.

CSS3 Transform Skew

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

Contoh CSS3 Skew

Keterangan : Semakin besar nilai deg maka akan semakin besar kemiringannya . Berbeda dengan Rotate , Skew hanya membuat miring suatu Objek sedangkan Rotate memutar Objek.

"Jika masih bingung silahkan tinggalkan Komentar , Semoga bermanfaat"