2D Transform (transformasi) adalah suatu efek yang digunakan untuk melakukan perubahan bentuk, ukuran dan posisi.
Translate
Translate digunakan untuk melakukan perubahan posisi suatu elemen. Parameter yang diberikan ada 2 yaitu sumbu X (posisi kiri) dan sumbu Y (posisi atas).
Contoh
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari dan Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
Rotate
Rotate digunakan untuk membuat elemen berputar searah jarum jam pada derajat tertentu. Untuk membuat perputaran berlawanan arah jarum jam digunakan nilai negatif.
Contoh
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari dan Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Scale
Scale digunakan untuk melakukan perubahan ukuran bentuk elemen berdasarkan parameter yang diiginkan. Parameter yang diberikan ada 2 yaitu sumbu X (lebar) dan sumbu Y (tinggi).
Contoh
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari dan Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
Skew
Skew digunakan untuk membuat perubahan elemen pada sudut tertentu, sesuai dengan parameter yang diberikan. Untuk horizontal (sumbu X) dan vertikal (sumbu Y).
Contoh
{
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 */
}
Matrix
Matrix ialah metode yang digunakan untuk menggabungkan semua metode transformasi 2D menjadi satu.
Metode matrix mengambil enam parameter yang berisi fungsi matematika yang memungkinkan anda untuk melakukan : rotate, scale, move (translate), dan skew.
Contoh
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari dan Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}