Sedikit Mengenal CSS3 Transform
Pada postingan kali ini kita akan sedikit memahami tentang CSS3 transform yang merupakan sebuah property yang memiliki beberapa value seperti scale, translate , rotate .
Penggunaan Dasar
Untuk menggunakan property ini kita harus menggunakan prefix karena pada beberapa browser property transform masih belumlah stabil.
Secara Default , titik tranformasi berada tepat ditengah-tengah element tapi kita bisa merubahnya dengan propertywebkit-transform-origin seperti pada contoh :
Nilai pertama adalah nilai untuk X dan kedua untuk Y . Pada contoh diatas kita menentukan titik transform pada (0,0) , bisa dilihat di ujung sebelah kanan atas.
Fungsi-Fungsi Transform
Seperti yang telah dikatakan tadi dalam property transform kita bisa menambahkan berbagai fungsi tranformasi objek seperti scale,translate , rotate.
CSS
HTML
Penggunaan Dasar
Untuk menggunakan property ini kita harus menggunakan prefix karena pada beberapa browser property transform masih belumlah stabil.
-webkit-transform : fungsiTransform(nilai);
-moz-transform : fungsiTransform(nilai);
-ms-transform : fungsiTransform(nilai);
-o-transform : fungsiTransform(nilai);
transform : fungsiTransform(nilai);
Secara Default , titik tranformasi berada tepat ditengah-tengah element tapi kita bisa merubahnya dengan property
-webkit-transform-origin : 0 0;
-moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
transform-origin : 0 0;
Nilai pertama adalah nilai untuk X dan kedua untuk Y . Pada contoh diatas kita menentukan titik transform pada (0,0) , bisa dilihat di ujung sebelah kanan atas.
Fungsi-Fungsi Transform
Seperti yang telah dikatakan tadi dalam property transform kita bisa menambahkan berbagai fungsi tranformasi objek seperti scale,translate , rotate.
- Scale : Fungsi scale akan merubah suatu element berdasarkan scala
- Translate : Fungsi Translate dapat berfungsi untuk memindahkan objek ke posisi yang kita inginkan
- Rotate : Artinya berputar pada suatu element sesuai dengan derajat yang diberikan . Nilai untuk fungsi ini memiliki satuan deg , nilai positif akan meutar searah jarum jam dan negatif sebaliknya.
CSS
.kotak{
width:100px;
height:100px;
background:#D5661C;
margin:20px;
color:white;
text-align:center;
line-height:50px;
float:left;
font-family:calibri,sans-serif
/* penambahan transition */
-webkit-transition:-webkit-transform .5s ease;
-moz-transition:-moz-transform .5s ease;
-ms-transition:-ms-transform .5s ease;
-o-transition:-o-transform .5s ease;
transition:transform .5s ease;
}
#scale:hover{
-webkit-transform:scale(2);
-moz-transform:scale(2);
-ms-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}
#translate:hover{
-webkit-transform:translate(20px, 30px);
-moz-transform:translate(20px, 30px);
-ms-transform:translate(20px, 30px);
-o-transform:translate(20px, 30px);
transform:translate(20px, 30px);
}
#rotate:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
#rotatex:hover{
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-ms-transform:rotateX(360deg);
-o-transform:rotateX(360deg);
transform:rotateX(360deg);
}
#rotateY:hover{
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
HTML
<div id="scale" class="kotak">Scale</div>
<div id="translate" class="kotak">Translate</div>
<div id="rotate" class="kotak">Rotate</div>
<div id="rotatex" class="kotak">RotateX</div>
Resource : Basic http://www.ariona.net/- W3 Scholl