Transformasi 2D

Transformasi adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk , ukuran dan posisi.
Dengan CSS3 transformasi , kita dapat mengubah skala , putaran , kebalikan , dan elemen peregangan sehingga transformasi menimbulkan efek 2D atau 3D.

Pada saat ini efek transformasi sudah dukung oleh beberapa browser seperti Internet Explorer 9 , Firefox , Chrome , Safari , Opera.
Tapi dari beberapa browser yang mendukung efek transformasi ini memiliki cara yang berbeda pada penulisan kodenya.

Berikut perbedaan yang perlu diperhatikan :
1. Internet Explorer 9 memerlukan awalan-ms-.
2. Firefox membutuhkan awalan-moz-.
3. Chrome dan Safari membutuhkan awalan-WebKit-.
4. Opera membutuhkan awalan-o-.
Sehingga bila kita menginginkan semua browser yang di sebutkan diatas menampilkan efek transformasi yang kita buat , sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Berikut ini saya berikan beberapa contoh metode transformasi 2D.

1. Translate
Dengan metode Translate , elemen bergerak dari posisi semula keposisi lain tergantung pada parameter yang diberikan untuk posisi kiri (sumbu X) dan bagian atas (sumbu Y) :

posisi awal tunjuk kesini

posisi kekanan 50px dan kebawah 10px

Kode :

<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.Translate#geser
{
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
</style>
<div class="Translate">ini pada posisi awal</div>
<div class="Translate" id="geser">ini posisi kekanan 50px dan kebawah 10px</div>

2. Rotate
Dengan metode rotate , elemen berputar searah jarum jam pada derajat tertentu.
Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.

posisi awal tunjuk kesini

posisi 45 derajat

Kode :

<style type="text/css">
div.rotate
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.rotate#memutar
{
margin:20px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
}
</style>
<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat</div>

3. Scale
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar.
Dalam hal ini ukuran atau ketebalan border juga ikut berubah.

bentuk awal kemudian diperkecil tunjuk kesini

bentuk awal kemudian diperbesar tunjuk kesini

diperkecil

diperbesar

Kode :

<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.scale#kecil
{
margin:10px;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}
div.scale#besar
{
margin:60px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
</style>
<div class="scale">ini bentuk awal</div>
<div class="scale" id="kecil">ini diperkecil</div>
<div class="scale" id="besar">ini diperbesar</div>

4. Skew

Dengan metode condong , elemen berubah dalam sudut tertentu tergantung pada parameter yang diberikan , untuk horizontal (sumbu X) dan vertikal (sumbu Y).

posisi awal tunjuk kesini

posisi miring kesamping 20 derajat, kebawah 10 derajat

Kode :

<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
}
div.posisi-awal#miring
{
margin:39px;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
</style>
<div class="posisi-awal">ini pada posisi awal</div>
<div class="posisi-awal" id="miring">ini posisi miring kesamping 20 derajat, kebawah 10 derajat</div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Admin .:: Get Widget ::.

Keterangan Artikel Ditulis oleh : Dhecun Blog Judul : Transformasi 2D Berlangganan artikel Komentari artikel ini...!!! <b>Dhecun Blog : <a href='http://dhecun.blogspot.com/2012/12/transformasi-2d.html'>Transformasi 2D</a></b>

Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.

Sumber : <a href='http://dhecun.blogspot.com/2012/12/transformasi-2d.html'>Transformasi 2D</a>