Gunakan css untuk mencipta segi tiga Gunakan CSS3 untuk mencipta prinsip dan kod tetrahedron 3d (latihan HTML5)_html5 kemahiran tutorial

Hari ini saya membaca artikel tentang cara menggunakan CSS3 untuk mencipta tetrahedron 3D, saya fikir ia agak bagus, jadi saya berkongsi dengan anda.
Perkara pertama yang saya ingin kongsikan dengan anda ialah cara menggunakan div css untuk mencipta segi tiga. Di sini saya akan menampal kod yang berkaitan dahulu, dan kemudian menerangkan prinsipnya kepada anda.
html:

Salin kod

Kod adalah seperti berikut:

cs >:

Salin kodKod adalah seperti berikut:

#pyramid {
kedudukan: relatif
jidar: 100px auto; #pyramid > div {
kedudukan: mutlak;
gaya sempadan: padu; 🎜>kedudukan: mutlak;
kandungan: "Segitiga";
warna: #fff; ; div:anak pertama {
warna sempadan: #ff0000 lutsinar #ff0000 rgba(50, 50, 50, 0.6
}
>
Kesan operasi
:



Analisis Prinsip
:
Dalam kod html, kami mentakrifkan dua div Div luar ialah objek bekas, dan div dalam digunakan untuk menghasilkan segi tiga. Dalam kod css, kami tidak menetapkan lebar dan ketinggian div dalaman, tetapi hanya menetapkan lebar tiga sisi sempadan (atas, bawah dan kiri). Dengan memberikan tiga sisi warna yang berbeza, mereka akan menjadi tiga segi tiga yang berbeza.
Pada masa ini, kita hanya perlu menetapkan warna bahagian atas dan bawah kepada warna lutsinar, dan segi tiga sama sisi akan muncul.





Salin kod

Kodnya adalah seperti berikut:
#pyramid > anak pertama {
warna sempadan: lutsinar lutsinar rgba(50, 50, 50, 0.6); mereka, merah Tempat yang ditunjukkan dalam bulatan ialah lokasi div dalam. Dia adalah objek yang tidak kelihatan dengan 0 lebar dan 0 ketinggian, tetapi ia sebenarnya wujud. Apa yang akan kita bincangkan seterusnya ialah cara melaksanakan tetrahedron 3d dan cara mencipta animasi. Pertama, tampal kod yang berkaitan.
html:

Salin kod Kodnya adalah seperti berikut:

< ;div id ="pyramid">

div>< ;/div> 🎜>

Kodnya adalah seperti berikut:

现在开始相关代码的讲解.
html代码和之前的差不多，就是多了三个div，分别作为四面体的另外三个面.
css代码中，我们使用 #pyramid > div:nth-child(n) 寻找到三面体的四个面,设置border四个边的颜色,将他们分别定义成三角形。通过transform属性的rotat eX,rotateY,translateX,translateY und translatorZ werden in dieser Funktion angezeigt 3维空间中的角度、朝向和位置。这里涉及到很多数学知识，大家需要去补充相关知识。

通过上述设置,四面体就形成了.接下来就是为其添加动画效果. Hier finden Sie weitere Informationen zu Animationen und Keyframes.我这里就不做过多讲解了.

本文到此为止，大家可以把html和css代码粘贴在一起，查看最终效果。
代码里面有不懂的内容, 大家可以给我留言.