CSS3 Mentransformasi
transformasi CSS3 memungkinkan Anda untuk menerjemahkan, memutar, skala, dan condong elemen.
Sebuah transformasi adalah efek yang memungkinkan unsur bentuk perubahan, ukuran dan posisi.
CSS3 mendukung 2D dan 3D transformasi.
Mouse di atas unsur-unsur di bawah ini untuk melihat perbedaan antara 2D dan transformasi 3D:
Browser Dukungan untuk 2D Mentransformasi
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -ms-, -webkit-, -moz- , atau -o- specify versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D Mentransformasi
Dalam bab ini Anda akan belajar tentang metode transformasi 2D berikut:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | Tip: Anda akan belajar tentang transformasi 3D dalam bab berikutnya. |
|---|
The translate() Metode
The translate() metode bergerak elemen dari posisi saat ini (sesuai dengan parameter yang diberikan untuk sumbu X dan Y-axis).
Contoh berikut bergerak <div> elemen 50 piksel ke kanan, dan 100 piksel turun dari posisi saat ini:
Contoh
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Cobalah sendiri " The rotate() Metode
The rotate() metode berputar suatu searah jarum jam unsur atau berlawanan arah jarum jam sesuai dengan tingkat tertentu.
Contoh berikut berputar <div> searah jarum jam elemen dengan 20 derajat:
Contoh
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
Cobalah sendiri " Menggunakan nilai-nilai negatif akan memutar elemen berlawanan arah jarum jam.
Contoh berikut berputar <div> elemen berlawanan arah jarum jam dengan 20 derajat:
Contoh
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Cobalah sendiri " The scale() Metode
The scale() metode meningkatkan atau mengurangi ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi).
Contoh berikut meningkatkan <div> elemen menjadi dua kali lebar aslinya, dan tiga kali dari tinggi aslinya:
Contoh
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
Cobalah sendiri " Contoh berikut menurunkan <div> elemen menjadi setengah dari lebar dan tinggi aslinya:
Contoh
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
Cobalah sendiri " The skewX() Metode
The skewX() metode skews elemen sepanjang sumbu X dengan sudut tertentu.
Contoh berikut skews <div> elemen 20 derajat sepanjang sumbu X:
Contoh
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Cobalah sendiri " The skewY() Metode
The skewY() metode skews elemen di sepanjang sumbu Y dengan sudut tertentu.
Contoh berikut skews <div> elemen 20 derajat sepanjang sumbu Y:
Contoh
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Cobalah sendiri " The skew() Metode
The skew() metode skews elemen sepanjang X dan Y-axis dengan sudut tertentu.
Contoh berikut skews <div> elemen 20 derajat sepanjang sumbu X, dan 10 derajat sepanjang sumbu Y:
Contoh
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Cobalah sendiri " Jika parameter kedua tidak ditentukan, memiliki nilai nol. Jadi, contoh berikut skews <div> elemen 20 derajat sepanjang sumbu X:
Contoh
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Cobalah sendiri " The matrix() Metode
The matrix() metode menggabungkan semua 2D transformasi metode menjadi satu.
The matrix() metode mengambil enam parameter, mengandung fungsi matematika, yang memungkinkan Anda untuk memutar, skala, bergerak (menerjemahkan), dan condong elemen.
Parameter adalah sebagai berikut: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
Contoh
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
CSS3 Transform Properti
Tabel berikut daftar semua 2D mengubah sifat:
| Milik | Deskripsi |
|---|---|
| transform | Menerapkan transformasi 2D atau 3D untuk elemen |
| transform-origin | Memungkinkan Anda untuk mengubah posisi pada elemen berubah |
2D Transform Metode
| Fungsi | Deskripsi |
|---|---|
| matrix(n,n,n,n,n,n) | Mendefinisikan transformasi 2D, menggunakan matriks enam nilai-nilai |
| translate(x,y) | Mendefinisikan terjemahan 2D, bergerak elemen sepanjang X dan sumbu Y |
| translateX(n) | Mendefinisikan terjemahan 2D, bergerak elemen sepanjang sumbu X |
| translateY(n) | Mendefinisikan terjemahan 2D, bergerak elemen sepanjang sumbu Y |
| scale(x,y) | Mendefinisikan transformasi skala 2D, mengubah elemen lebar dan tinggi |
| scaleX(n) | Mendefinisikan transformasi skala 2D, mengubah lebar elemen |
| scaleY(n) | Mendefinisikan transformasi skala 2D, mengubah tinggi elemen |
| rotate(angle) | Mendefinisikan rotasi 2D, sudut yang ditentukan dalam parameter |
| skew(x-angle,y-angle) | Mendefinisikan 2D transformasi condong sepanjang X dan sumbu Y |
| skewX(angle) | Mendefinisikan 2D transformasi condong sepanjang sumbu X |
| skewY(angle) | Mendefinisikan 2D transformasi condong sepanjang sumbu Y |