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...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge