จุดประสงค์ของบล็อกนี้เป็นเพราะอินสแตนซ์ที่มีเสน่ห์ของ HTML5 CSS3 อินสแตนซ์พิเศษ CSS3 สร้างเอฟเฟกต์ 3D FLOP ของ Baidu Tieba
แผนภูมิเอฟเฟกต์: เฮ้ฉันได้ถ่ายรูปวิทยาลัยการสำเร็จการศึกษาของวิทยาลัยเป็นโทรจันแบบหมุนหมุนรอบข้อความใหญ่ของฉันและความสง่างามของการเพาะปลูกโรงเรียนเก่าของฉัน ~
1. มุมมองคุณลักษณะมุมมองประกอบด้วยสองแอตทริบิวต์: ไม่มีและความยาวของหน่วย
ในหมู่พวกเขาค่าเริ่มต้นของแอตทริบิวต์มุมมองคือไม่มีซึ่งหมายความว่าวัตถุ 3 มิติถูกดูในมุมไม่ จำกัด แต่มันดูแบน ค่าอื่น <Langth> ยอมรับค่าของหน่วยที่มากกว่า 0 และหน่วยของมันไม่สามารถเป็นเปอร์เซ็นต์ ยิ่งค่า <langth> มากเท่าไหร่มุมที่ไกลออกไปก็จะปรากฏขึ้นเพื่อสร้างความแข็งแรงต่ำและการเปลี่ยนแปลงพื้นที่ 3 มิติที่เล็กมาก ในทางกลับกันค่านี้ที่เล็กลงเท่าไหร่มุมก็ยิ่งใกล้มากเท่าไหร่เพื่อสร้างมุมที่มีความเข้มสูงและการเปลี่ยนแปลง 3 มิติขนาดใหญ่ เพื่อให้ง่ายขึ้น: เมื่อตั้งค่าการตั้งค่ามุมมองที่เล็กลงก็หมายความว่ายิ่งเอฟเฟกต์ 3D ชัดเจนยิ่งใกล้กับวัตถุ 3 มิติมากขึ้นและในทางกลับกัน
2. Transform: TranslatedZ (ความยาว)สมมติว่าเมื่อคุณตั้งค่ามุมมอง: 300px ค่าของ Translatez จะถูกตั้งค่าให้เล็กลงขนาดขององค์ประกอบเด็กที่เล็กลง
แกนกลางของตัวอย่างข้างต้น:1. ก่อนอื่นคอนเทนเนอร์ของรูปภาพทั้งหมดคือตำแหน่ง: สัมบูรณ์, ซ้อนทับกันแล้วตั้งค่า rotatey ครั้งละ 40*i, i = 0, 1, 2 ... 9;
2. จากนั้นตั้งค่า Translatez สำหรับแต่ละภาพของคอนเทนเนอร์
html:
<! ข้อความ/javascript src = ../../ jQuery-1.8.3.js> </script> <script type = text/javascript> // alert (64/math.tan (20/180 * Math.pi)) ); องค์ประกอบผลตอบแทน;} $ (function () {var deg = -40, i = 1; $ (#container). click (function () {transform ($ (this) [0], rotatey ( + (deg * ( deg *] i ++)+deg))})});}); /1.jpg/> <pan> ทำทีละสิ่งและทำได้ดี .. </span> </li> <li> <img src = img/2.jpg/> <pan> ทำสิ่งเดียวที่ เวลาและทำได้ดี > <img src = img/4.jpg/> <span> whatver กำลังทำคำเป็นคำที่ทำได้ดี . > </li> <li> <img src = img/7.jpg/> <pan> ไม่เคยใส่สำนักงานที่คุณสามารถทำได้จนถึงวันนี้จนถึงวันพรุ่งนี้ .jpg/> <pan> แจ็คของ trands ทั้งหมดและหลักของไม่มี </li> </div> </body> </html "CSS:
Li {Width: 128px; 0, 0, 0, .5); {wid th: 900px; jpg) ไม่มีการทำซ้ำ 0; -การเปลี่ยนแปลง: -webkit-transform 1s; (0deg) Translatez (300px);} li: nth-child (1) {-webkit-traansform: Rotatey (40deg) Translatez (300px);} li: nth-child (2) {-webkit-transform: rotat ey (rotat ey 80deg) Translatez (300px);} li: nth-child (3) {-webkit-transform: Rotatey (120deg) Translatez (300px);} li: nth-child (4) {-webkit-transform: 16 0deg) Translatez (300px);} li: nth-child (5) {-webkit-traansform: Rotatey (200deg) Translatez (300px);} li: nth-child (6) {-webkit-transform: Rotatey 300px);} li: nth-child (7) {-webkit-traansform: Rotatey (280deg) Translatez (300px);} li: nth-child (8) {-webkit-transform: Rotatey (300px); nth-child (9) {-webkit-transform: Rotatey (360deg) Translatez (300px);}Div#stage เป็นเวทีตั้งค่ามุมมอง Li ตั้งค่า rotatey และ translatez; ค่าเริ่มต้นหมายความว่าองค์ประกอบย่อยทั้งหมดจะถูกนำเสนอในระนาบ 2D Preserve-3D บ่งชี้ว่าองค์ประกอบย่อยทั้งหมดจะถูกนำเสนอในพื้นที่ 3 มิติ หากค่าของรูปแบบการแปลงถูกตั้งค่าเป็น Preserve-3D ในองค์ประกอบมันบ่งบอกว่ามันไม่ได้ดำเนินการจัดแสดงนิทรรศการแบบแบนและองค์ประกอบย่อยทั้งหมดของเขาอยู่ในพื้นที่ 3 มิติ ภายใต้สถานการณ์ปกติแอตทริบิวต์นี้ใช้สำหรับองค์ประกอบการดำเนินการของเอฟเฟกต์ภาพเคลื่อนไหว 3 มิตินั่นคือมันใช้เอฟเฟกต์ภาพเคลื่อนไหว 3 มิติดังนั้นองค์ประกอบย่อยควรอยู่ในพื้นที่ 3 มิติ
สิ่งหนึ่งที่ให้ความสนใจ: ในตัวอย่างนี้เอฟเฟกต์ภาพเคลื่อนไหวคือการคลิกเมาส์ มันคือการหมุนโทรจันนี้ดังนั้นคุณจะต้องเปลี่ยนมุม Rotatey 40 ของคอนเทนเนอร์ Div#ในแต่ละครั้ง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้