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.

Dan 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 :

• Internet Explorer 9 memerlukan awalan-ms-.
• Firefox membutuhkan awalan-moz-.
• Chrome dan Safari membutuhkan awalan-WebKit-.
• Opera membutuhkan awalan-o-.

Sehingga bila kita menginginkan semua browser yang saya sebutkan diatas menampilkan efek transformasi yang kita buat, sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.

Ok, berikut saya berikan beberapa contoh metode transformasi 2D :

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) :

<style type="text/css">
div.Translate
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini pada posisi awal

ini posisi kekanan 50px dan kebawah 10px

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

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

<div class="rotate">ini pada posisi awal</div>
<div class="rotate" id="memutar">ini posisi 30 derajat/div>

Berikut hasilnya :

ini pada posisi awal

ini posisi 30 derajat/div>

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

<style type="text/css">
div.scale
{
width:100px;
height:75px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini bentuk awal

ini diperkecil

ini diperbesar

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

<style type="text/css">
div.posisi-awal
{
width:100px;
height:120px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

ini pada posisi awal

ini posisi miring kesamping 20 derajat, kebawah 10 derajat

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.