Dasar Dasar TRANFORMASI 2D DI CSS3

Dasar Dasar TRANFORMASI 2D DI CSS3 Oleh: Irvansyah

Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css. Sebelum kita menuju contoh2nya kita bahas dulu transform y itu apa dan apa fungsinya.. Transform jika di bahasa Indonesia berarti perpindahan.Nah Sesuai dengan artinya maka akan ada perubahan di suatu objek baik ukuran maupun posisi obj...

Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css. Sebelum kita menuju contoh2nya kita bahas dulu transform y itu apa dan apa fungsinya.. Transform jika di bahasa Indonesia berarti perpindahan.Nah Sesuai dengan artinya maka akan ada perubahan di suatu objek baik ukuran maupun posisi objek.. Dengan Css3 transform objek bisa dirubah bentuk dan posisinya sesuai yang kita mau dan yang kita butuhkan.. Sesuai standart Dari W3school sich ada 5 macam transform di css3 yaitu : translate(), rotate(), scale(), skew(), dan matrix(). Tapi yang paling sering digunain sich translate(), rotate(), scale(), dan skew() jadi kita akan bahas kecuali matrix(). Ok d langsung aja kita bahas 1 per 1.. 1.translate() : sebuah objek akan dapat berpindah dari posisi aslinya dengan acuan jarak Kiri(x-axis) dan jarak Kanan(y-axis). Perhatiin d ilustrasi dibawah ini.. Syntak umumnya : transform:translate(nilai-posisiX,nilai-posisiY);

Untuk membuat contoh transform:translate(), kita buat contoh 2 objek agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style> .translate1 { width:150px; height:150px; background:#37f70b; transform: translate(0px,0px); -ms-transform: translate(0px,0px); /* IE 9 */ -webkit-transform: translate(0px,0px); /* Safari and Chrome */

-o-transform: translate(0px,0px); /* Opera */ -moz-transform: translate(0px,0px); /* Firefox */ } .translate { width:150px; height:150px; background:#37f70b; transform: translate(30px,30px); -ms-transform: translate(30px,30px); /* IE 9 */ -webkit-transform: translate(30px,30px); /* Safari and Chrome */ -o-transform: translate(30px,30px); /* Opera */ -moz-transform: translate(30px,30px); /* Firefox */ } Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : Hasilnya akan menjadi seperti Ini:

Teman2 Dapat Mengganti Nilai Posisi X dan Y dengan nilai pt(point), cm(centimeter), px(pixel), ataupun %(percent). Contoh transform: translate(30pt,30pt); 2.rotate():Dengan fungsi rotate() maka sebuah objek akan dapat diputar hingga 3600 dan jika dengan nilai negatif maka objek akan diputar kearah berlawanan. Syntak untuk : rotate(nilai derajat);

Untuk membuat contoh transform:rotate(), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini :

<style> .rotate1{ width:150px; height:150px; background-color:# f5ba05; border:solid 2px red; transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -moz-transform:rotate(0deg); /* Firefox */ -webkit-transform:rotate(0deg); /* Safari and Chrome */ -o-transform:rotate(0deg); /* Opera */ } .rotate{ width:150px; height:150px; background-color:# f5ba05; border:solid 2px green; transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ } Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : Hasilnya akan menjadi seperti Ini:

Teman2 Dapat Mengganti Nilai derajatnya sesuai keinginan kamu dari Mulai 0 sampai 3600 atau 0 Sampai -360. Contoh transform: rotate(-30deg); 3.scale() : Dengan fungsi scale() maka sebuah objek akan dapat diperbesar atau diperkecil dengan acuan (x-axis) sebagai Lebar dan (y-axis) sebagai Tinggi. Syntak umum : scale(nilai-X(lebar),nilai-Y(tinggi));

Untuk membuat contoh transform:scale(), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style> .scale1{ width:100px; height:75px; background-color:#c6b710; border:solid 2px red; } .scale{ width:150px; height:150px; background-color:#c6b710; transform:scale(2,1); margin:100px; -ms-transform:scale(2,1); /* IE 9 */ -moz-transform:scale(2,1); /* Firefox */ -webkit-transform:scale(2,1); /* Safari and Chrome */ -o-transform:scale(2,1); /* Opera */ border:solid 2px green; } Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : Hasilnya akan menjadi seperti Ini:

Untuk Nilai scale kamu cukup mengganti nilai X dan Y dengan angka yang lain tampa harus menggunakan pt(point),px(pixel),cm(centimeter),ataupun %(percent),Karena efek scale tidak akan berjalan di browser. Kenapa..?? Karena Gambar sudah Diperbesar dengan scale jika kamu mengatur lagi tinggi lebar gambar maka efek akan berlawanan . 4.skew() : Dengan fungsi scale() maka sebuah objek akan dapat berbentuk perspektif dengan acuan (x-axis) sebagai nilai derajat Horizontal dan (y-axis) sebagai nilai derajat vertikal. Syntak umum : skew(nilai-derajatX,nilai-derajatY);

Untuk membuat contoh transform:skew (), kita buat contoh 2 objek lagi agar telihat jelas perubahan posisinya. Buka Notepad teman2 lalu ketikan kode dibawah ini : <style> .skew{ width:100px; height:75px; background-color:#08f7de; border:solid 2px red; transform: skew(0deg,0deg); -ms-transform: skew(0deg,0deg); /* IE 9 */ -webkit-transform: skew(0deg,0deg); /* Safari and Chrome */ -o-transform: skew(0deg,0deg); /* Opera */ -moz-transform: skew(0deg,0deg); /* Firefox */ } .skew1{ width:150px; height:150px; background-color:#08f7de; border:solid 2px green; margin:100px;

transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } Dibagian body teman2 ketikkan kode dibawah ini untuk memanggilnya classnya : Hasilnya akan menjadi seperti Ini:

Sama Seperti rotate()Teman2 Dapat Mengganti Nilai derajatnya sesuai keinginan kamu dari Mulai 0 sampai 3600 atau 0 Sampai -360. Fuih…!!???? Akhirnya selesai juga tutornya tentang css transform.. Nah saya harap dengan tutor dan contohnya tadi mudah2n teman bias jadi lebih paham.. Jika Teman2 ingin lebih fokus saya sudah sertakan link download dibawah dengan ekstensi *.rar jadi tema2 tinggal ekstrak aja utak atik d kodenya. Oia seikit informasi untuk semuuua jenis transform diatas masih ada yang belum support dengan css transform jadi buat kamu pengguna IE(internet explorer) yang versi dibawah 9 cepat2 d donlod yang terbaru buat terrapin ilmu css transformnya . Akhir kata dicoba terus y n semoga berhasil. Sampai jumpa lagi di tutor berikutnya.. DOWNLOD CSS TRANSFORM TUTORIAL

Tentang Penulis

Irvansyah Tertarik Dengan Web Desain, Photoshop, dan Animasi Flash. Mohon panduan Dan arahan Agar Dapat menjadi Lebih Baik dab Bisa Sharing ke

sesama..