ความคิดเห็น: ฉันอ่านบทความเกี่ยวกับวิธีใช้ CSS3 เพื่อสร้าง tetrahedrons 3D ฉันคิดว่ามันค่อนข้างดีดังนั้นฉันจึงนำมันออกมาและแบ่งปันวิธีการใช้ Div+CSS เพื่อสร้างสามเหลี่ยม ที่นี่ฉันจะวางรหัสที่เกี่ยวข้องก่อนจากนั้นอธิบายหลักการให้คุณ
วันนี้ฉันอ่านบทความเกี่ยวกับวิธีการใช้ CSS3 เพื่อสร้าง tetrahedrons 3D ฉันคิดว่ามันค่อนข้างดีดังนั้นฉันจึงเอามันออกมาและแบ่งปันกับคุณสิ่งแรกที่ฉันต้องการแบ่งปันกับคุณคือวิธีใช้ Div+CSS เพื่อสร้างสามเหลี่ยม ที่นี่ฉันจะวางรหัสที่เกี่ยวข้องก่อนจากนั้นอธิบายหลักการให้คุณ
html:
<div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
ตำแหน่ง: ญาติ;
มาร์จิ้น: 100px auto;
ความสูง: 500px;
ความกว้าง: 100px;
-
#pyramid> div {
ตำแหน่ง: สัมบูรณ์;
สไตล์ชายแดน: ของแข็ง;
ความกว้างของชายแดน: 200px 0 200px 346px;
-
#pyramid> div: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: "สามเหลี่ยม";
สี: #FFFF;
ซ้าย: -250px;
TEXT-ALIGN: CENTER;
-
#pyramid> div: ลูกคนแรก {
สีชายแดน: #FF0000 โปร่งใส #FF0000 RGBA (50, 50, 50, 0.6);
-
</style>
เอฟเฟกต์การทำงาน:
การวิเคราะห์หลักการ:
ในรหัส HTML เรากำหนดสอง divs, div ด้านนอกเป็นวัตถุคอนเทนเนอร์และ DIV ด้านในใช้เพื่อสร้างสามเหลี่ยม ในรหัส CSS เราไม่ได้ตั้งค่าความกว้างและความสูงสำหรับ DIV ภายใน แต่ตั้งค่าความกว้างของขอบสามขอบของเส้นขอบ (บนลงล่างและซ้าย) โดยการตั้งค่าสีที่แตกต่างกันสำหรับทั้งสามด้านพวกเขาจะกลายเป็นสามสามเหลี่ยมที่แตกต่างกันตามลำดับ
ในเวลานี้เราเพียงแค่ต้องตั้งค่าสีที่ด้านบนและด้านล่างเป็นสีที่โปร่งใสและสามเหลี่ยมด้านเท่าจะปรากฏขึ้น
#pyramid> div: ลูกคนแรก {
สีชายแดน: RGBA โปร่งใสโปร่งใส (50, 50, 50, 0.6);
-
ภาพการทำซ้ำ:
ในหมู่พวกเขาสถานที่ที่แสดงในวงกลมสีแดงเป็นที่ตั้งของ div ภายใน เขาเป็นวัตถุที่มองไม่เห็นที่มีความกว้าง 0 และความสูง 0 แต่มีอยู่จริง
สิ่งที่เราจะพูดถึงต่อไปคือวิธีการใช้ tetrahedrons 3D และวิธีการสร้างภาพเคลื่อนไหว
ก่อนอื่นวางรหัสที่เกี่ยวข้อง
html:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
ตำแหน่ง: ญาติ;
มาร์จิ้น: 100px auto;
ความสูง: 500px;
ความกว้าง: 100px;
-webkit-transform-style: Preserve-3d;
-webkit-animation: หมุน 10s Infinite เชิงเส้น;
-webkit-transform-Origin: 116px 200px 116px;
-moz-transform-style: Preserve-3d;
-moz-Animation: หมุน 10s Infinite เชิงเส้น;
-moz-transform-Origin: 116px 200px 116px;
-ms-transform-style: Preserve-3d;
-ms-animation: หมุน 10s เชิงเส้นอนันต์;
-MS-Transform-Origin: 116px 200px 116px;
Transform-style: Preserve-3d;
แอนิเมชั่น: สปิน 10S เชิงเส้นไม่มีที่สิ้นสุด;
Transform-Origin: 116px 200px 116px;
-
@-webkit-keyframes หมุน {
จาก {
-webkit-transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
-
ถึง {
-webkit-transform: Rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
-
-
@-moz-keyframes หมุน {
จาก {
-MOZ-TRANSFORM: ROTATEX (0DEG) ROTATEY (0DEG) ROTATEZ (0DEG);
-
ถึง {
-MOZ-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
-
-
@-ms-keyframes หมุน {
จาก {
-ms-transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
-
ถึง {
-MS-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
-
-
@KeyFrames หมุน {
จาก {
แปลง: rotatex (0deg) rotatey (0deg) rotatez (0deg);
-
ถึง {
แปลง: rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
-
-
#pyramid> div {
ตำแหน่ง: สัมบูรณ์;
สไตล์ชายแดน: ของแข็ง;
ความกว้างของชายแดน: 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: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: "สามเหลี่ยม";
สี: #FFFF;
ซ้าย: -250px;
TEXT-ALIGN: CENTER;
-
#pyramid> div: ลูกคนแรก {
สีชายแดน: RGBA โปร่งใสโปร่งใส (50, 50, 50, 0.6);
-webkit-transform: Rotatey (-19.5deg) Rotatex (180deg) Translateey (-400px);
-MOZ-TRANSFORM: ROTATEY (-19.5DEG) ROTATEX (180DEG) Translateey (-400px);
-ms-transform: Rotatey (-19.5deg) Rotatex (180deg) Translateey (-400px);
แปลง: rotatey (-19.5deg) Rotatex (180deg) Translateey (-400px);
-
#pyramid> div: nth-child (2) {
สีชายแดน: RGBA โปร่งใสโปร่งใส (50, 50, 50, 0.6);
-webkit-transform: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translateey (-400px);
-MOZ-TRANSFORM: ROTATEY (90DEG) ROTATEZ (60DEG) ROTATEX (180DEG) Translateey (-400px);
-ms-transform: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translateey (-400px);
แปลง: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translateey (-400px);
-
#pyramid> div: nth-child (3) {
สีชายแดน: RGBA โปร่งใสโปร่งใส (50, 50, 50, 0.9);
-webkit-transform: Rotatex (60deg) Rotatey (19.5deg);
-MOZ-TRANSFORM: ROTATEX (60DEG) ROTATEY (19.5DEG);
-ms-transform: Rotatex (60deg) Rotatey (19.5deg);
แปลง: Rotatex (60deg) Rotatey (19.5deg);
-
#pyramid> div: nth-child (4) {
สีชายแดน: RGBA โปร่งใสโปร่งใส (50, 50, 50, 0.8);
-webkit-transform: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translateey (-200px) Translatez (326px);
-moz-transform: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translateey (-200px) Translatez (326px);
-ms-transform: Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translateey (-200px) Translatez (326px);
แปลง: rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translateey (-200px) Translatez (326px);
-
</style>
ตอนนี้เริ่มอธิบายรหัสที่เกี่ยวข้อง
รหัส HTML นั้นคล้ายคลึงกับรหัสก่อนหน้านี้ซึ่งก็คือมี divs เพิ่มเติมอีกสาม divs ซึ่งใช้เป็นอีกสามด้านของ tetrahedron
ในรหัส CSS เราใช้ #pyramid> div: nth-child (n) เพื่อค้นหาใบหน้าทั้งสี่ของ trihedron ตั้งค่าสีของทั้งสี่ด้านของชายแดนและกำหนดให้เป็นสามเหลี่ยมตามลำดับ ตั้งมุมการปฐมนิเทศและตำแหน่งในพื้นที่ 3 มิติผ่านวิธีการหมุนเวียนของแอตทริบิวต์การหมุนเวียน, rotatey, translatex, translatey และ translatez สิ่งนี้เกี่ยวข้องกับความรู้ทางคณิตศาสตร์มากมายและทุกคนต้องการเสริมความรู้ที่เกี่ยวข้อง
ผ่านการจัดเรียงข้างต้น tetrahedron จะเกิดขึ้น ถัดไปคือการเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวให้กับมัน สิ่งที่ใช้ในที่นี้ยังง่ายมากคือแอนิเมชั่นและ keyframes คุณสามารถเรียนรู้คุณสมบัติที่เกี่ยวข้องกับ CSS3 ได้ที่เว็บไซต์ดังนั้นฉันจะไม่อธิบายมากเกินไปที่นี่
ณ จุดนี้ในบทความนี้คุณสามารถวางรหัส HTML และ CSS ด้วยกันเพื่อดูเอฟเฟกต์สุดท้าย
มีบางอย่างในรหัสที่คุณไม่เข้าใจดังนั้นคุณสามารถฝากข้อความถึงฉัน