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.

-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 seperti pada contoh :

-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.
Untuk contoh kita bisa membuat kotak dengan CSS3 Transform

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

Artikel Menarik Lainnya :