27 Des 2011
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.
-moz-transform: rotate(4deg) ;
-webkit-transform: rotate(4deg) ;
-o-transform: rotate(4deg) ;
-ms-transform: rotate(4deg);
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
-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.
-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.
Diie
