CSS3 3D Transform

Di artikel sebelumnya saya telah bahas 2d transform. Kalau sekarang yang versi 3D.

2D itu berdasarkan dua sumbu axis yaitu sumbu-x dan sumbu-y. Kalau 3D transform itu pakai 3 sumbu, sumbu-x, sumbu-y dan sumbu-z.

rotateX()

Pertama adalah berdasarkan sumbu-X artinya horizontal. Dengan syntax: rotateX(derajat);

#div1 {
  width: 300px;
  height: 100px;
  background-color: #5340ff;
  color:white;
  padding:10px;
  margin-bottom:30px;
  transition: all 1.0s linear;
}

#div1:hover {
  transform: rotateX(150deg);
}

Saya tambahkan kode transition: all 1.0s linear; supaya terlihat efek transisinya.

rotateY()

Digunakan untuk membuat efek rotasi berdasrkan sumbu Y atau vertikal. Dengan syntax rotateY(derajat);

#div2 {
  width: 300px;
  height: 100px;
  background-color: #5340ff;
  color:white;
  padding:10px;
  margin-bottom:30px;
  transition: all 1.0s linear;
}

#div2:hover {
  transform: rotateY(150deg);
}

rotateZ()

Terakhir adalah rotateZ() untuk membuat rotate berdasarkan sumbu Z.

#div3 {
  width: 300px;
  height: 100px;
  background-color: #5340ff;
  color:white;
  padding:10px;
  margin-bottom:30px;
  transition: all 1.0s linear;
}

#div3:hover {
  transform: rotateZ(150deg);
}

scale3d()

Kemudian adalah scale3d() digunakan untuk mengubah ukuran element. Ditulis dengan syntax scale3d(sx, sy, sz).

#div4 {
  width: 300px;
  height: 100px;
  background-color: #5340ff;
  color:white;
  padding:10px;
  margin-bottom:30px;
  transition: all 1.0s linear;
}

#div4:hover {
  transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 80deg);
}

Standardnya sclae3d() ditulis bersamaan dengan rotate3d().

Fungsi 3D transform

Berikut ini adalah function untuk transform 3 dimensi:

Fungsi	Keterangan
translateZ(tz)	Perpindahan elemen berdasar sumbu-Z
translateY(ty)	Perpindahan elemen berdasar sumbu-Y
translateX(tx)	Perpindahan elemen berdasar sumbu-X
translate3d(tx,ty,tz)	Perpindahan elemen berdasar sumbu-X, sumbu-Y, sumbu-Z
scaleZ(sz)	Mengubah ukuran element berdasar sumbu-Z
scaleY(sy)	Mengubah ukuran element berdasar sumbu-Y
scaleX(sx)	Mengubah ukuran element berdasar sumbu-X
scale3d(sx,sy,sz)	Mengubah ukuran element berdasar sumbu-X, sumbu-Y, sumbu-Z
rotateZ(a)	Rotate element berdasar sumbu-Z dengan a derajat
rotateY(a)	Rotate element berdasar sumbu-Y dengan a derajat
rotateX(a)	Rotate element berdasar sumbu-X dengan a derajat
rotate3d(x,y,z, a)	Rotate element berdasar sumbu-X, sumbu-Y, sumbu Z (vektor)
perspective(length)	Menentukan perspective view di 3D
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	Menentukan 3D transfor dengan matrix 4×4 atau 16 value