Panduan CSS3 kali ini kita akan memahami, mempelajari dan mempraktekkan Cara Membuat Transform 2D dengan CSS3.
Panduan CSS3 kali ini kita akan memahami, mempelajari dan mempraktekkan Cara Membuat Transformasi 2D dengan CSS3. transformasi 2D digunakan untuk kembali mengubah struktur elemen seperti menerjemahkan, memutar, skala, dan skew
Tabel berikut adalah terkandung nilai-nilai umum yang digunakan dalam transformasi 2D
| Values | Deskripsi |
|---|---|
| matrix(n,n,n,n,n,n) | Digunakan untuk mendefinisikan matriks transformasi dengan enam nilai |
| translate(x,y) | Digunakan untuk mengubah elemen bersama dengan sumbu x dan y-axis |
| translateX(n) | Digunakan untuk mengubah elemen bersama dengan sumbu x |
| translateY(n) | Digunakan untuk mengubah elemen bersama dengan sumbu y |
| scale(x,y) | Digunakan untuk mengubah lebar dan tinggi dari elemen |
| scaleX(n) | Digunakan untuk mengubah lebar elemen |
| scaleY(n) | Digunakan untuk mengubah ketinggian elemen |
| rotate(angle) | Digunakan untuk memutar elemen berdasarkan sudut |
| skewX(angle) | Digunakan untuk mendefinisikan skew mengubah bersama dengan sumbu x |
| skewY(angle) | Digunakan untuk mendefinisikan skew mengubah bersama dengan sumbu y |
Contoh-contoh berikut ditampilkan sampel semua sifat di atas
Putar 20 derajat
Box rotasi dengan sudut 20 derajat seperti yang ditunjukkan di bawah ini
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(20deg); /* Safari */ -webkit-transform: rotate(20deg); /* Standard syntax */ transform: rotate(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv"> Tutorials point.com </div> </body> </html>
Ini akan menghasilkan hasil sebagai berikut :
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Standard syntax */ transform: rotate(-20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv"> Tutorials point.com </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Skew X axis
Box rotasi dengan skew sumbu x seperti yang ditunjukkan di bawah ini
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewX(20deg); /* Safari */ -webkit-transform: skewX(20deg); /* Standard syntax */ transform: skewX(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="skewDiv"> Tutorials point.com </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Skew Y axis
Box rotasi dengan skew y-axis seperti yang ditunjukkan di bawah ini
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Standard syntax */ transform: skewY(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="skewDiv"> Tutorials point.com </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Matrix transform
Box rotasi dengan Matrix mengubah seperti yang ditunjukkan di bawah ini
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE 9 */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */ transform: matrix(1, -0.3, 0, 1, 0, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv1"> Tutorials point.com </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Matrix mengubah dengan arah lain
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE 9 */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ transform: matrix(1, 0, 0.5, 1, 150, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id="myDiv2"> Tutorials point.com </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
COMMENTS