Css 2D transforms memungkinkan kita untuk memanipulasi visual sebuah elemen dengan memiringkan,memutar, atau menggalakkan. Di artikel ini akan dibahas transformasi 2D.Terdapat metode-metode untuk membuat transformasi 2D,metode itu sendiri terdiri dari:

  • translate()
  • rotate()
  • scale()
    • scaleX()
    • scaleY()
  • skew()
    • skewX()
    • skewY()
  • matrix()

Metode yang pertama yaitu translate(),dengan metode ini kita bisa memindahkan element dari posisinya,sesuai dengan parameter yang diberikan untuk sumbu X dan sumbu Y.Metode ini memiliki parameter berupa sumbu X dan Y,dan diikuti satuan bisa berupa px atau persen.Jadi penulisan metode translate adalah transform: translate(sumbuX(px/%), sumbuY(px/%));,contoh

Copy Code 


.box {
background-color: #fff;
border: 2px solid #000;
width: 200px;
height: 200px;
padding: 20px;
transform: translate(50px, 50px);
}

Copy Code 


<div class="box">
<p>content box bergerak 50px ke kanan dan 50px kebawah</p>
</div>

Element yang ditambahkan metode translate,akan bergerak sesuai value parameternya,seperti gambar diatas.

Metode yang kedua adalah rotate(),dengan metode ini kita bisa memutar element searah jarum jam atau berlawanan dengan arah jarum jam,sesuai dengan value yang diberikan.Metode ini hanya menerima satuan deg(derajat).Jika value yang diberikan adalah bilangan positif maka,element akan diputar sesuai arah jarum jam.Sebaliknya jika value yang diberikan adalah bilangan negatif maka,element akan diputar berlawanan arah dengan jarum jam.Metode ini hanya menerima satuan deg.

Copy Code 


.box {
transform: rotate(50deg);
}

 

Element berputar sesuai arah jarum jam,karena value yang diberikan berupa angka positive.

Copy Code 


.box {
transform: rotate(-50deg);
}

Element berputar berlawanan dengan arah jarum jam,karena value yang diberikan berupa angka negative.

Metode yang ketiga adalah scale(),dengan menggunakan metode ini element akan diperbesar atau diperkecil.Sesuai dengan parameter yang diberi untuk width dan height.Cara menggunakan metode ini sangat simpel,1 untuk ukuran normal sedangkan angka lebih dari satu akan memperbesar element,sesuai angka yang dimasukan.Contoh jika memberi value 2 maka element akan diperbesar 2x dari ukuran aslinya,namun jika value yang diberikan dibawah 1 dan diatas 0,misal 0.5,maka element akan diperkecil setengah dari ukuran aslinya.

Copy Code 


.box {
transform: scale(2, 1.5);
}

Element diperbesar 2x ukuran panjangnya, dan 1.5x ukuran tingginya dari ukuran aslinya,karena value yang diberikan adalah angka lebih dari 1.

Copy Code 


.box {
transform: scale(0.5);
}

Element diperkecil setengah dari ukuran aslinya,baik ukuran panjang maupun ukuran tingginya,karena value yang diberikan adalah angka kurang dari 1,dan diatas 0.Valuenya juga bisa hanya diberi satu angka,yang dimana akan membuat element,diperbesar atau diperkecil dengan ukuran panjang,dan tinggi yang sama.

Terdapat juga metode scaleX() dan scaleY(),keduanya memiliki kegunaan yang sama dengan metode scale().Namun perbedaannya,adalah metode scaleX() hanya memperbesar atau memperkecil ukuran panjang.Sedangkan,metode scaleY() hanya memperbesar atau memperkecil ukuran tingginya saja.

Metode yang keempat adalah skew(),metode ini akan memiringkan element,di sepanjang sumbu X dan sumbu Y sesuai sudut yang diberikan.Metode ini hanya menerima satuan deg,sama seperti metode rotate.

Copy Code 


.box {
transform: skew(10deg, 15deg);
}

Element dimiringkan 10 derajat sepanjang sumbu X, dan 15 derajat sepanjang sumbu Y.Jika parameter kedua tidak diisi,maka akan dianggap bervalue 0,atau normal.Lebih jelasnya bisa lihat contoh dibawah

Copy Code 


.box {
transform: skew(10deg);
}

Bisa dilihat,jika parameter kedua tidak diisi makan hanya akan memiringkan element sepanjang sumbu X.

Terdapat dua metode skewX() dan skewY(),keduanya memiliki kegunaan yang sama dengan metode skew().Namun perbedaan kedua metode ini yaitu,kegunaannya yang lebih spesifik.Seperti skewX() berguna untuk memiringkan element sepanjang sumbu X saja.Sedangkan skewY() berguna untuk memiringkan element sepanjang sumbu Y saja.

Metode transform 2D yang terakhir adalah metode matrix(),metode ini menggabungkan semua metode transform 2D menjadi satu.Metode ini mengambil 6 parameter,yang berisi fungsi matematika.Yang memungkian untuk memutar(rotate()),menskala(scale()),memindahkan(translate()), dan memiringkan(skew()) sebuah element.Parameternya adalah sebagai berikut matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).

Copy Code 


.box {
transform: matrix(1.5, -0.5, 0, 1, 150, 50);
}