Komentar: Saya membaca artikel tentang cara menggunakan CSS3 untuk membuat tetrahedron 3D. Saya pikir itu cukup bagus, jadi saya mengeluarkannya dan berbagi dengan Anda cara menggunakan Div+CSS untuk membuat segitiga. Di sini saya pertama -tama akan menempelkan kode yang relevan, dan kemudian menjelaskan prinsipnya kepada Anda
Hari ini saya membaca sebuah artikel tentang cara menggunakan CSS3 untuk membuat tetrahedron 3D. Saya pikir itu cukup bagus, jadi saya mengeluarkannya dan membagikannya dengan Anda.Hal pertama yang ingin saya bagikan dengan Anda adalah cara menggunakan Div+CSS untuk membuat segitiga. Di sini saya pertama -tama akan menempelkan kode yang relevan dan kemudian menjelaskan prinsip -prinsipnya kepada Anda.
html:
<div>
<div> </div>
</div>
CSS:
<type style = "text/css">
#pyramid {
Posisi: kerabat;
Margin: 100px Auto;
Tinggi: 500px;
Lebar: 100px;
}
#pyramid> div {
Posisi: Absolute;
Gaya perbatasan: solid;
Batas-lebar: 200px 0 200px 346px;
}
#pyramid> Div: After {
Posisi: Absolute;
Konten: "Segitiga";
Warna: #FFFF;
Kiri: -250px;
Teks-Align: tengah;
}
#pyramid> div: anak pertama {
Color Border: #FF0000 Transparan #FF0000 RGBA (50, 50, 50, 0,6);
}
</tyle>
Efek Menjalankan:
Analisis Prinsip:
Dalam kode HTML, kami mendefinisikan dua div, div luar adalah objek kontainer, dan div bagian dalam digunakan untuk menghasilkan segitiga. Dalam kode CSS, kami tidak mengatur lebar dan tinggi untuk div internal, tetapi hanya mengatur lebar tiga tepi perbatasan (atas, bawah dan kiri). Dengan mengatur warna yang berbeda untuk ketiga sisi, mereka masing -masing akan menjadi tiga segitiga yang berbeda.
Pada saat ini, kita hanya hanya perlu mengatur warna di sisi atas dan bawah ke warna transparan, dan segitiga sama sisi akan muncul.
#pyramid> div: anak pertama {
Color perbatasan: transparan transparan transparan rgba (50, 50, 50, 0,6);
}
Gambar reproduksi:
Di antara mereka, tempat yang ditampilkan di Lingkaran Merah adalah tempat div internal berada. Dia adalah objek yang tidak terlihat dengan lebar 0 dan tinggi 0, tetapi sebenarnya ada.
Apa yang akan kita bicarakan selanjutnya adalah cara menerapkan tetrahedron 3D dan cara membuat animasi.
Pertama, tempel kode yang relevan.
html:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<type style = "text/css">
#pyramid {
Posisi: kerabat;
Margin: 100px Auto;
Tinggi: 500px;
Lebar: 100px;
-webkit-transform-style: cagar alam-3d;
-webkit-animasi: spin 10s linear Infinite;
-webkit-transform-origin: 116px 200px 116px;
-Moz-Transform-style: cagar alam-3d;
-Moz-animasi: spin 10s linear Infinite;
-Moz-transform-origin: 116px 200px 116px;
-MS-Transform-style: Preserve-3d;
-MS-animasi: spin 10s linear Infinite;
-MS-Transform-Origin: 116px 200px 116px;
Transform-style: Preserve-3d;
Animasi: Spin 10s Linear Infinite;
Transform-Origin: 116px 200px 116px;
}
@-webkit-keyframe spin {
dari {
-webkit-transform: rotatex (0deg) rotate (0deg) rotatez (0deg);
}
ke {
-webkit-transform: rotatex (360deg) rotate (360deg) rotatez (360deg);
}
}
@-moz-keyframe spin {
dari {
-Moz-transform: rotatex (0deg) rotate (0deg) rotatez (0deg);
}
ke {
-Moz-transform: rotatex (360deg) rotate (360deg) rotatez (360deg);
}
}
@-ms-keyframe spin {
dari {
-MS-Transform: rotatex (0deg) rotate (0deg) rotatez (0deg);
}
ke {
-MS-Transform: rotatex (360deg) rotate (360deg) rotatez (360deg);
}
}
@keyframes spin {
dari {
Transform: rotatex (0deg) rotate (0deg) rotatez (0deg);
}
ke {
Transformasi: Rotatex (360deg) Rotate (360deg) RotateZ (360deg);
}
}
#pyramid> div {
Posisi: Absolute;
Gaya perbatasan: solid;
Batas-lebar: 200px 0 200px 346px;
-webkit-transform-origin: 0 0;
-Moz-transform-origin: 0 0;
-MS-Transform-Origin: 0 0;
Transform-Origin: 0 0;
}
#pyramid> Div: After {
Posisi: Absolute;
Konten: "Segitiga";
Warna: #FFFF;
Kiri: -250px;
Teks-Align: tengah;
}
#pyramid> div: anak pertama {
Color perbatasan: transparan transparan transparan rgba (50, 50, 50, 0,6);
-webkit-transform: rotatey (-19.5deg) rotatex (180deg) translatey (-400px);
-Moz-transform: rotate (-19.5deg) rotatex (180deg) translatey (-400px);
-MS-Transform: rotate (-19.5deg) rotatex (180deg) translatey (-400px);
transformasi: rotate (-19.5deg) rotatex (180deg) translatey (-400px);
}
#pyramid> Div: nth-child (2) {
Color perbatasan: transparan transparan transparan rgba (50, 50, 50, 0,6);
-webkit-transform: rotatey (90deg) rotatez (60deg) rotatex (180deg) translatey (-400px);
-Moz-transform: rotate (90deg) rotatez (60deg) rotatex (180deg) translatey (-400px);
-MS-Transform: rotate (90deg) rotatez (60deg) rotatex (180deg) translatey (-400px);
Transformasi: Rotate (90deg) RotateZ (60deg) Rotatex (180deg) Translatey (-400px);
}
#pyramid> Div: nth-child (3) {
Color perbatasan: transparan transparan transparan rgba (50, 50, 50, 0,9);
-webkit-transform: rotatex (60deg) rotate (19.5deg);
-Moz-Transform: rotatex (60deg) rotate (19.5deg);
-MS-Transform: rotatex (60deg) rotate (19.5deg);
Transformasi: Rotatex (60deg) Rotate (19.5deg);
}
#pyramid> Div: nth-child (4) {
Color perbatasan: transparan transparan transparan rgba (50, 50, 50, 0,8);
-webkit-transform: rotatex (-60deg) rotatey (19.5deg) translatex (-116px) translatey (-200px) translateZ (326px);
-Moz-transform: rotatex (-60deg) rotate (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
-MS-Transform: rotatex (-60deg) rotate (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
Transformasi: rotatex (-60deg) rotate (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
}
</tyle>
Sekarang mulailah menjelaskan kode yang relevan.
Kode HTML mirip dengan yang sebelumnya, yaitu ada tiga div tambahan, yang digunakan sebagai tiga sisi lain dari tetrahedron.
Dalam kode CSS, kami menggunakan #pyramid> div: nth-child (n) untuk menemukan empat wajah trihedron, mengatur warna keempat sisi perbatasan, dan mendefinisikannya menjadi segitiga masing-masing. Atur sudut, orientasi, dan posisinya dalam ruang 3D melalui rotEx atribut transform, rotate, translatex, translatey dan translateZ. Ini melibatkan banyak pengetahuan matematika, dan setiap orang perlu menambah pengetahuan yang relevan.
Melalui pengaturan di atas, tetrahedron terbentuk. Berikutnya adalah menambahkan efek animasi ke dalamnya. Hal -hal yang digunakan di sini juga sangat sederhana, yaitu animasi dan kerangka kunci. Anda dapat mempelajari properti yang terkait dengan CSS3 di situs, jadi saya tidak akan menjelaskan terlalu banyak di sini.
Pada titik ini dalam artikel ini, Anda dapat menempelkan kode HTML dan CSS bersama -sama untuk melihat efek akhir.
Ada sesuatu dalam kode yang tidak Anda mengerti, sehingga Anda dapat meninggalkan saya pesan.