Selamat Datang

Mengenal Transformasi di CSS3

CSS3 memberikan banyak pilihan bagi developer untuk menggali lebih dalam & mengeksplor imajinasi kita. Sama halnya dengan style properties yang akan kita bahas sekarang, transformation.

Trans.. what?

Transformation, atau transformasi dalam bahasa Indonesia, yaitu css properties yang berfungsi merubah rupa (bentuk & sifat) HTML element dalam bidang 2 dimensi atau 3 dimensi. Transformasi sering digunakan untuk memindahkan, mengecilkan elemen, atau merubah koordinatnya. Memang sedikit membingungkan kalau tidak langsung nyebur ke text editor, apalagi istilah ini sering tertukar dengan kawannya, transition. Transformation, seperti yang telah kita obrolkan barusan, berbeda dengan transition dimana Transition berfungsi membuat animasi dengan perantara 2 state(kondisi awal dan akhir).

Lagi lagi kotak

HTML disusun dari rangkaian segi empat. Seperti biasa, kamu bisa menghiasnya dengan style favorit;  rounded di setiap ujungnya, text cerah, dan sedikit shading cantik sehingga terlihat melayang. But, it’s still there,  di atas permukaan berupa, lagi-lagi, segi empat. Segi empat yang sama yang dibuat oleh designers dengan software andalannya, e.g. Photoshop, yang dapat merubah bentuknya, besarnya, arahnya, dan lainnya.

Dengan menggunakan modul CSS3 2D, kita dapat mendesain grafis tanpa repot-repot kembali menggunakan software tambahan. Fungsi dasar seperti rotating, skewing, dan scaling sudah disediakan. Jadi, bagi kamu yang tidak terlalu familiar dengan design software, dont panic, you also can do it here, much easier trust me.

Contoh sederhana transfomasi CSS3

Contoh sederhana transfomasi CSS3

Gimana caranya?

Gampang, Transformation diaktifkan dengan menggunakan transform property yang terdiri dari nama dan nilai fungsinya. Seperti ini:

[css]transform: function(values);[/css]

Bagian function, bisa kamu ubah-ubah dengan nama transform properties yang kamu inginkan. Untuk lebih jelas nanti akan kita bahas di bawah, atau kamu bisa menggayuh lebih dalam di sini. Untuk bagian values, kamu bisa ganti dengan nilai yang kamu inginkan.

Hal yang harus diperhatikan, properties function memakai vendor-prefix untuk mengatasi masalah cross browser. Sampai saat tulisan ini saya ketik, transfom sempurna digunakan;

Tanpa Prefix : Firefox, IE10, Opera 12 tanpa prefix.

Prefix -webkit: Chrome, Safari dan Opera 15+ memakai prefix -webkit, seperti ini:

[css]-webkit-transform: function(values);[/css]

And Finally, IE9 support basic 2D transformation dengan menambahakan prefix -ms.

[css]-ms-transform: function(values);[/css]

Tapi, yauda la ya, beberapa bulan lagi IE9 fixed dead dan dikenang penggunanya.

Penggunaan vendor-prefix sangatlah rentan dan tidak sempurna, apalagi apabila transformation dikombinasikan dengan efek animasi. Solusinya, kamu harus sabar menunggu sebentar saja dan terus berdoa bersama tim browser secepatnya mengaplikasikan standard form transformation, atau kamu bisa ganti efek yang serupa dengan properties lain.

Document Flow

Penting diketahui bahwa mengaplikasikan tranformation pada suatu elemen, tidak mempengaruhi sama sekali pada document flow. Space yang memang dibutuhkan saat membuat elemen transformation tetap ada disana. Walaupun kamu kecilkan elemen yang kamu maksud, atau hilangkan, atau dibuat di belakang semua elemen, tetap space itu berada di tempatnya. Untuk lebih kebayang kamu bisa lihat di sini.

DEMO

Gimana? mudah kan. Kalau kamu makin courios, yok lanjut lebih dalam 2D Transformation Functions.





Penulis :

Designing for love. Mendesain sudah menjadi darahnya sejak mengenal komputer. Sama seperti kamu, bahagia menjalani passionnya. Writer. Presenter. Front end engineer. Master Engineering on Geo Informatics. :D View all posts by arwasil

Comments

3 thoughts on “Mengenal Transformasi di CSS3

  1. […] Artikel ini akan membahas CSS3 2D Transformation, merupakan lanjutan artikel sebelumnya dengan judul Mengenal Transformasi di CSS3. […]

  2. […] sudah melewati 2 tahap awal, Basic Transformation dan 2D Transformation. Sekarang kita berada di bagian paling menarik dari transformation, […]

  3. Aldi Unanto says:

    Hmm css transform sedikit-sedikit mulai memakainya tapi hanya untuk efek-efek tertentu. Selebihnya masih kurang pemahaman nih..

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development