CSS3 3D Mentransformasi
CSS3 memungkinkan Anda untuk memformat elemen Anda menggunakan transformasi 3D.
Mouse di atas unsur-unsur di bawah ini untuk melihat perbedaan antara 2D dan transformasi 3D:
Browser Dukungan untuk 3D Mentransformasi
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D Mentransformasi
Dalam bab ini Anda akan belajar tentang metode transformasi 3D berikut:
-
rotateX() -
rotateY() -
rotateZ()
The rotateX() Metode
The rotateX() metode berputar elemen di sekitar X-sumbunya dengan gelar yang diberikan:
Contoh
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Cobalah sendiri " The rotateY() Metode
The rotateY() metode berputar elemen sekitar nya Y-axis di gelar yang diberikan:
Contoh
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Cobalah sendiri " The rotateZ() Metode
The rotateZ() metode berputar elemen sekitar Z-sumbu pada derajat tertentu:
Contoh
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »
CSS3 Transform Properti
Tabel berikut daftar semua 3D transformasi sifat:
| Milik | Deskripsi |
|---|---|
| transform | Menerapkan transformasi 2D atau 3D untuk elemen |
| transform-origin | Memungkinkan Anda untuk mengubah posisi pada elemen berubah |
| transform-style | Menentukan bagaimana elemen bersarang tersebut diberikan di ruang 3D |
| perspective | Menentukan perspektif tentang bagaimana elemen 3D dipandang |
| perspective-origin | Menentukan posisi bawah elemen 3D |
| backface-visibility | Mendefinisikan apakah atau tidak unsur harus terlihat ketika tidak menghadap layar |
3D Transform Metode
| Fungsi | Deskripsi |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Mendefinisikan transformasi 3D, menggunakan matriks 4x4 dari 16 nilai-nilai |
| translate3d(x,y,z) | Mendefinisikan terjemahan 3D |
| translateX(x) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk X-axis |
| translateY(y) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai sumbu Y |
| translateZ(z) | Mendefinisikan terjemahan 3D, hanya menggunakan nilai untuk Z-sumbu |
| scale3d(x,y,z) | Mendefinisikan transformasi skala 3D |
| scaleX(x) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk X-axis |
| scaleY(y) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk Y-axis |
| scaleZ(z) | Mendefinisikan transformasi skala 3D dengan memberikan nilai untuk Z-sumbu |
| rotate3d(x,y,z,angle) | Mendefinisikan rotasi 3D |
| rotateX(angle) | Mendefinisikan rotasi 3D sepanjang sumbu X |
| rotateY(angle) | Mendefinisikan rotasi 3D sepanjang sumbu Y |
| rotateZ(angle) | Mendefinisikan rotasi 3D sepanjang sumbu Z |
| perspective(n) | Mendefinisikan perspektif untuk elemen 3D ditransformasikan |