Panduan CSS3 10 kali ini kita belajar dan mempraktekkan Cara Membuat Transformasi 3D dengan CSS3.
Panduan CSS3 10 kali ini kita belajar dan mempraktekkan Cara Membuat Transformasi 3D dengan CSS3. Menggunakan dengan transformasi 3d, kita bisa memindahkan elemen ke sumbu x, y-axis dan z-axis, Berikut contoh jelas menentukan bagaimana elemen akan berputar.
Metode Transformasi 3D dengan CSS3
Di bawah metode yang digunakan untuk memanggil transformasi 3D
| Values | Deskripsi |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Digunakan untuk mengubah elemen dengan menggunakan 16 nilai dari matriks |
| translate3d(x,y,z) | Digunakan untuk mengubah elemen dengan menggunakan x-axis, y-axis dan z-sumbu |
| translateX(x) | Digunakan untuk mengubah elemen dengan menggunakan x-axis |
| translateY(y) | Digunakan untuk mengubah elemen dengan menggunakan sumbu y |
| translateZ(z) | Digunakan untuk mengubah elemen dengan menggunakan sumbu z |
| scaleX(x) | Digunakan untuk skala mengubah elemen dengan menggunakan x-axis |
| scaleY(y) | Digunakan untuk skala mengubah elemen dengan menggunakan sumbu y |
| scaleY(y) | Digunakan untuk mengubah elemen dengan menggunakan z-axis |
| rotateX(angle) | Digunakan untuk memutar mengubah elemen dengan menggunakan x-axis |
| rotateY(angle) | Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu y |
| rotateZ(angle) | Digunakan untuk memutar mengubah elemen dengan menggunakan z-axis |
X-axis Transformasi 3D dengan CSS3
Berikut contoh menunjukkan transformasi 3D sumbu x
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } </style> </head> <body> <div> tutorials point.com </div> <p>Rotate X-axis</p> <div id="myDiv"> tutorials point.com. </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Y-axis Transformasi 3D dengan CSS3
Berikut contoh menunjukkan transformasi 3D y-axis
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } </style> </head> <body> <div> tutorials point.com </div> <p>Rotate Y axis</p> <div id="yDiv"> tutorials point.com. </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
Z-axis Transformasi 3D dengan CSS3
Berikut contoh menunjukkan transformasi 3D Z-axis
<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } </style> </head> <body> <p>rotate Z axis</p> <div id="zDiv"> tutorials point.com. </div> </body> </html>
akan menghasilkan hasil sebagai berikut :
COMMENTS