News Update :

Sunday, November 27, 2011

Membuat Transformasi 2D di Blog

Share this article :

09:51 |

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.

Note :- Kindly g+1 this post if you found it useful
Euro Live Streaming
You Might Also Like :


3 comments

November 27, 2011 at 11:24 AM  

WoW mantapp

November 27, 2011 at 11:28 AM  

wah kren... coba dulu ahhh

mnt kungan baliknya ya!!!

December 13, 2011 at 4:21 PM  

@Zh!nThoTerimakasih telah berkunjung dan memberi komentar..

Post a Comment