Mengenal Transformasi 2D di CSS3

M-S Blog || Artikel ini akan membahas CSS3 2D Transformation, merupakan lanjutan artikel sebelumnya dengan judul Mengenal Transformasi di CSS3.

Continue from our last catch up tentang basic css transformation. Sekarang kita akan bahas properti transformasi 2D dengan css3. Tujuannya untuk dapat merubah baik posisi, bentuk, dan sifat suatu elemen dalam bidang 2 dimensi.

Seperti yang sudah kita bahas sebelumnya, transformasi diaktifkan dengan syntax transform yang diikuti dengan nama fungsi dan nilainya. Serta tambahan vendor prefix untuk mengatasi masalah cross-browser, seperti ini:

1	trasnform: function(values);

2

3	-webkit-transform: function(values);

Translate, TranslateX, TranslateY

Properties ini berfungsi merubah posisi elemen baik dalam arah horizontal (sumbu X), vertikal (sumbu Y), maupun keduanya. Nilainya bisa berapapun dengan beragam satuan (%, px, pc, em, vw, edll). Penulisannya seperti ini:

1	transform: translate( -350px, 100% );

Artinya elemen digeser sebesar 350px ke kiri dan 100% ke atas. Persen disini bukan mengacu pada lebarnya viewport, tapi mengacu pada lebarnya elemen kita. Jadi elemen di atas geser ke atas tepat sebesar lebarnya. Kamu bisa mencoba translateX, dan translateY dengan terpisah persis seperti di atas hanya nilai yang dimasukkan tunggal.

Mungkin sekarang kamu berpikir, ‘Apa bedanya dengan properties yang lain, untuk hanya menggeser elemen saya bisa gunakan margin’. Ya, mungkin benar kamu bisa lakukan ini dengan margin, tapi transfrom memberikan kemudahan. Misalkan kamu punya elemen yang horizontally centered dengan margin: 0 auto. Lalu kamu ingin menggeser elemen itu ke kiri sebesar 70px. Ini tidak akan masalah jika kamu tahu persis lebarnya container elemen tersebut, sehingga nilai 70px memang nilai yang tepat. Namun, jika sebaliknya kamu tidak tahu berapa lebar persis container (dan memang mayoritas responsive design menggunakan lebar seperti ini), kamu dapat menggunakan translate untuk menggeser elemen tersebut, baik dengan satuan absolut (px, pc, pt) maupun relatif (em, %, vw).

Scale, ScaleX, ScaleY 

Berfungsi untuk merubah dimensi dari suatu elemen dan semua elemen di dalamnya (child elements). Kamu bisa menuliskannya secara singkat maupun secara terpisah dengan perantara koma, seperti ini:

1	transform: scale(-1.5 , 3);

2

3	transfrom: scale(2);

Pada baris pertama, elemen diperkecil 1.5x ke arah X dan 3x ke arah Y. Kamu juga bisa menuliskan ini secara terpisah, jika hanya ingin merubah dalam satu sisi saja baik scaleX, maupun scaleY. Pada baris kedua elemen diperbesar 2x baik ke arah X dan Y. Selain itu, nilai negatif diperbolehkan dan menghasilkan mirror elemen, yap efek seperti cermin pada suatu objek. Kamu bisa lihat hasilnya di sini.

DEMO

Bagi kamu yang senang fancy desain mungkin efek ini membantu, in my humble opinion,  jika menerapkan efek pikirkan terlebih dahulu konsep matang sebelum memasangkan semua skill set kita.

Rotate

Berfungsi untuk memutar elemen. Nilai yang dipakai dapat dalam deg (derajat) maupun rad (radian), seperti ini:

1	transform: rotate(45deg);

Elemen di atas diputar sebesar 45 derajat searah jarum jam. Sebaliknya apabila nilai negatif maka berlawanan arah jarum jam. Elemen berputar pada porosnya yang berada di tengah-tengah elemen tersebut. Kamu kapanpun bisa merubah posisi porosnya dengan properti transform-origin, dengan nilai: left, right, top, bottom, dan gabungan pojok-pojoknyo, seperti ini:

1	transform-origin: right-top;

Elemen diubah posisi porosnya menjadi di kanan atas elemen, sehingga rotasi yang terjadi akan mengacu pada titik tersebut.

SkewX dan SkewY

Berfungsi untuk memiringkan elemen. Kesimetrisan elemen pada sumbu X dan sumbu Y terpecahkan dengan properties ini. Anyway, penulisan skewX dan skewY secara singkat, saat ini sudah ditiadakan dari spesifikasi sehingga tidak lagi kita gunakan. Kamu bisa tulis seperti ini:

1	transform: skewX(40deg);

2

3	transform: skewY(-1.5rad);

Kamu bisa lihat hasilnya di sini.

DEMO Skew 2D Transformation

Transformasi Gabungan

Seperti namanya, gabungan terdengar legit. Yap, kita bisa menggabungkan semua properties transformation di atas menjadi satu kode singkat (shorthand) dengan pemisah tanda koma. Seperti ini:

1	transform: scale(2), rotate(45deg), skewX(40deg), skewY(-1.5rad);

Kalo kamu seorang engineer atau scientist atau matematiks geeks, kamu pasti menyukai matriks. Kamu bisa gunakan matriks kesayangan kamu untuk mentransformasi elemen di css3. Css3 memberikan 6 kolom matriks dengan 4 kolom pertama menunjukkan transformasi dan 2 kolom terakhir menunjukkan perbesaran dimensi (scaling). Seperti ini:

1	transform: matrix(-350, 200, 45, -1.5, -1.5, 3);

Nilai matriks ini dioperasikan kepada seluruh point pada elemen untuk membentuk bentuk dan posisi yang baru.

Saya mau cancel Transformation, caranya gimana?

Mudah, simply write syntax like this:

1	transform: none;

Kode ini kamu tulis pada elemen yang kamu inginkan batal transformasi. Metode ini lebih baik dilakukan dibandingkan kamu menghapus semua kode yang sudah kamu buat sebelumnya. Selain lebih mudah menulis sedikit kode kamu juga bisa mengundo redo pekerjaan kamu untuk mendapatkan efek yang kamu inginkan.

Booya, sampai sini kamu bisa membuat efek transofrmasi 2D di css3.

Source : http://www.tutorial-webdesign.com/css3-2d-transformation/