CSS transformasi 3D

CSS transformasi 3D

CSS juga mendukung konversi 3D.

Silakan taruh kursor mouse di bawah elemen yang ada, lalu lihat perbedaan antara konversi 2D dan 3D:

rotate 2D
rotate 3D

Dalam bab ini, Anda akan belajar tentang atribut CSS berikut:

  • transform

Dukungan browser

Angka di tabel menandai versi browser pertama yang mendukung atribut ini penuh.

Atribut Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Metode transformasi 3D CSS

dengan CSS transform Atribut, Anda dapat menggunakan metode transformasi 3D berikut:

  • rotateX()
  • rotateY()
  • rotateZ()

Fungsi rotateX()

Putar X

rotateX() Metode untuk memutar elemen sekitar sumbu X dengan sudut yang diberikan:

Contoh

#myDiv {
  transform: rotateX(150deg);
}

Coba sendiri

Fungsi rotateY()

Putar Y

rotateY() Metode untuk memutar elemen sekitar sumbu Y dengan sudut yang diberikan:

Contoh

#myDiv {
  transform: rotateY(130deg);
}

Coba sendiri

Fungsi rotateZ()

rotateZ() Metode untuk memutar elemen sekitar sumbu Z dengan sudut yang diberikan:

Contoh

#myDiv {
  transform: rotateZ(90deg);
}

Coba sendiri

Atribut transformasi CSS

Tabel di bawah menampilkan semua atribut transformasi 3D:

Atribut Deskripsi
transform Aplikasikan transformasi 2D atau 3D kepada elemen.
transform-origin Izinkan Anda mengubah posisi elemen yang diubah.
transform-style Tentukan bagaimana elemen yang disisihkan ditampilkan di ruang 3D.
perspective Tentukan efek perspektif elemen 3D.
perspective-origin Tentukan posisi bawah elemen 3D.
backface-visibility Definisi apakah elemen dapat terlihat saat tidak menghadap layar.

Metode transformasi 3D CSS

Fungsi Deskripsi
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Definisi transformasi 3D, menggunakan matriks 4x4 dari 16 nilai.
translate3d(x,y,z) Definisi transformasi rotasi 3D.
translateX(x) Definisi transformasi rotasi 3D, hanya menggunakan nilai untuk sumbu X.
translateY(y) Definisi transformasi rotasi 3D, hanya menggunakan nilai untuk sumbu Y.
translateZ(z) Definisi transformasi rotasi 3D, hanya menggunakan nilai untuk sumbu Z.
scale3d(x,y,z) Definisi transformasi skala 3D.
scaleX(x) Definisi transformasi skala 3D, melalui nilai sumbu X.
scaleY(y) Definisi transformasi skala 3D, melalui nilai sumbu Y.
scaleZ(z) Definisi transformasi skala 3D, melalui nilai sumbu Z.
rotate3d(x,y,z,angle) Mendefinisikan putar 3D.
rotateX(angle) Mendefinisikan putar 3D sepanjang sumbu X.
rotateY(angle) Mendefinisikan putar 3D sepanjang sumbu Y.
rotateZ(angle) Mendefinisikan putar 3D sepanjang sumbu Z.
perspective(n) Mendefinisikan tampilan perspektif 3D elemen transformasi.