Transformasi 3D CSS3
Transformasi 3D
CSS3 membolehkan anda menggunakan transformasi 3D untuk memformat elemen.
Dalam bab ini, anda akan mempelajari beberapa kaedah penukaran 3D ini:
rotateX()
rotateY( )
kaedah rotateX()
kaedah rotateX(), putarkannya pada darjah tertentu Elemen untuk diputar sepanjang paksi X.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color: #f4ff99; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <div>PHP.CN</div> <div id="div2">HELLO</div> </body> </html>
Jalankan program untuk mencubanya
rotateY() kaedah
kaedah rotateY(), memutarkan elemen di sekeliling paksi-Ynya mengikut darjah tertentu.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:rotateY(130deg); -webkit-transform:rotateY(130deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> <div id="div2">Hello.</div> </body> </html>
Jalankan atur cara dan cuba
Sifat penukaran
Jadual berikut menyenaraikan semua sifat penukaran :
属性 | 描述 | CSS |
---|---|---|
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
Kaedah penukaran 3D
Fungsi | Penerangan | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
matriks3d(< em>n,n,n,n,n,n em>,
| Tentukan penjelmaan 3D, menggunakan matriks 4x4 16 nilai. | ||||||||||||||||||||||||||||||
translate3d(x,y,z) | Tentukan transformasi 3D. | ||||||||||||||||||||||||||||||
translateX(x) | Mentakrifkan terjemahan 3D menggunakan hanya nilai yang digunakan untuk paksi X. | ||||||||||||||||||||||||||||||
translateY(y) | Tentukan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Y. | ||||||||||||||||||||||||||||||
translateZ(z) | Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Z. | ||||||||||||||||||||||||||||||
skala3d(x,y,z) | Tentukan transformasi penskalaan 3D. | ||||||||||||||||||||||||||||||
scaleX(x) | Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi X. | ||||||||||||||||||||||||||||||
scaleY(y) | Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi Y. | ||||||||||||||||||||||||||||||
scaleZ(z) | Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi-Z. | ||||||||||||||||||||||||||||||
putar3d(x,y,z,sudut) | Tentukan putaran 3D. | ||||||||||||||||||||||||||||||
rotateX(angle) | Mentakrifkan putaran 3D di sepanjang paksi X. | ||||||||||||||||||||||||||||||
rotateY(angle) | Mentakrifkan putaran 3D di sepanjang paksi Y. | ||||||||||||||||||||||||||||||
rotateZ(angle) | Mentakrifkan putaran 3D di sepanjang paksi Z. | ||||||||||||||||||||||||||||||
perspektif(n) | Tentukan pandangan perspektif bagi elemen yang diubah suai 3D. |