tutorial pengembangan web terbaru
 

CSS Mentransformasi 2D


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:

2D memutar
3D memutar

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
transform36.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()
CatatanTip: Anda akan belajar tentang transformasi 3D dalam bab berikutnya.

The translate() Metode

Menterjemahkan

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

Memutar

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

Skala

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

Memutar

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