วิธีการสร้างภาพเคลื่อนไหวพลิกปุ่ม 3D ด้วย CSS

สองอันสำหรับด้านหน้าและด้านหลังของปุ่มและอีกอันที่สามสำหรับเติมความลึกตรงกลาง เราใส่ใบหน้าทั้งสามปุ่มลงใน .flipBtn คอนเทนเนอร์ที่จะทำงานเป็นปุ่ม 3D และเราวางปุ่ม 3D ลงใน .flipBtnWrapper เสื้อคลุม.

2. การเพิ่มสไตล์พื้นฐานด้วย CSS

เราตั้งค่า ความกว้าง และ ความสูง คุณสมบัติของ wrapper, ปุ่ม, และปุ่มจะปรากฏขึ้น, และจัดวางตำแหน่งโดยใช้เทคนิคการจัดตำแหน่งแบบสัมพัทธ์ / สัมบูรณ์.

 .flipBtnWrapper width: 200px; ความสูง: 200px; ตำแหน่ง: ญาติ;  .flipBtn, .flipBtn_face width: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์;  

3. สไตล์ใบหน้า 3 ปุ่ม

เราเพิ่มภาพพื้นหลังให้กับใบหน้าด้านหน้าและปุ่มย้อนกลับและตั้งค่าการไล่ระดับสีเชิงเส้นเย็น ๆ ด้านหลังภาพสำหรับทั้งสอง เคล็ดลับที่นี่ก็คือใน CSS คุณสามารถตั้งค่าหลายภาพเป็นภาพพื้นหลังสำหรับองค์ประกอบเดียวกันและคุณยังสามารถประกาศการไล่ระดับสีเป็นภาพพื้นหลัง.

ตรงกลางใบหน้า, .flipBtn_mid, ได้รับ ความสูง ของ 20px และพื้นที่เดียวกันของ 20px ถูกสร้างขึ้นระหว่างใบหน้าด้านหน้าและด้านหลัง เราประสบความสำเร็จโดยใช้ translateZ () ฟังก์ชั่น CSS นั้น ย้ายองค์ประกอบไปตามแกน z. เราผลักหน้าด้านหลังออกไป 10px และนำหน้าไปข้างหน้า 10px.

 .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), การไล่ระดับสีเชิงเส้น (# FF6366 50%, # FEA56E); backface-ทัศนวิสัย: ซ่อนอยู่ เปลี่ยนรูป: translateZ (10px);  .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), การไล่ระดับสีเชิงเส้น (# FF6366 50%, # FEA56E); สีพื้นหลัง: สีน้ำเงิน; แปลง: translateZ (-10px);  .flipBtn_mid height: 20px; สีพื้นหลัง: # d5485a; แปลง: rotateX (90deg); ด้านบน: -10px; 

ไปยัง ครอบคลุมพื้นที่ ระหว่างด้านหน้าและด้านหลังกับใบหน้าตรงกลางเรา วางหน้าตรงกลางราบ ข้ามระนาบ x ของพื้นที่ 3D โดยใช้ แปลง: rotateX (90deg); กฎที่ ทำให้มันตั้งฉาก ไปที่ทั้งปุ่มด้านหน้าและปุ่มหันหน้าเข้าหา y-plane.

เนื่องจากใบหน้าตรงกลางวางราบทั่วระนาบ x จุดสูงสุดของแกน y นั้นคือ 10px (ครึ่งหนึ่งของความสูง) ลงมาจากเดิม ดังนั้นในการดึงมันกลับมาและจัดแนวด้านบนให้ตรงกับปุ่มอีกสองหน้าฉันจึงเพิ่ม ด้านบน: -10px กฎเช่นกัน.

ฉันใช้ backface การมองเห็น คุณสมบัติ CSS สำหรับด้านหน้าดังนั้นเมื่อเราพลิกปุ่มด้านหลังของด้านหน้าจะไม่สามารถมองเห็นได้.

จนถึงตอนนี้คุณจะเห็นหน้าด้านหน้าบนหน้าจอเท่านั้นเนื่องจาก x-plane ถูกซ่อนจากมุมมองและบนหน้าจอ y-plane (หน้าจอ) ใบหน้าสุดท้ายที่วางลงคือด้านหน้า. โดยการหมุนปุ่ม คุณจะสามารถมองเห็นใบหน้าอื่น ๆ ได้เช่นกัน.

4. หมุนปุ่ม

คุณสมบัติ CSS รูปแบบการแปลงกำหนดว่าองค์ประกอบลูกขององค์ประกอบ HTML จะแสดงแบบแบนหรือตำแหน่งในพื้นที่ 3D ในข้อมูลโค้ดด้านล่าง เปลี่ยนรูปแบบ: - รักษา - 3d; กฎให้ปริมาณ 3D กับปุ่มของเราในขณะที่ แปลง: rotatexX () คุณสมบัติหมุนรอบ ๆ แกน x.

 .flipBtn transform-style :erve-3d; แปลง: rotateX (-120deg);  

โปรดทราบว่าฉันใช้ -120deg เพียงเพื่อจุดประสงค์ในการสาธิตเนื่องจากวิธีนี้ง่ายขึ้นที่จะแสดงให้เห็นว่าการหมุนปุ่มทำงานอย่างไร.

อย่างไรก็ตามในขั้นตอนต่อไปเราจะเปลี่ยนเป็น -180deg เพื่อให้ปุ่มพลิกไปมาอย่างสมบูรณ์.

5. การเคลื่อนไหวปุ่ม

ณ จุดนี้ปุ่ม 3D ของเรายังคงไม่เคลื่อนไหว เราสามารถทำได้โดยใช้ การเปลี่ยนแปลง คุณสมบัติ เราใช้ แปลง property สำหรับค่าแรกเนื่องจากเป็นคุณสมบัติที่เราต้องการใช้เอฟเฟกต์การเปลี่ยนแปลงสำหรับ ค่าที่สองคือระยะเวลา, 2s.

มาทำให้ปุ่มหมุนเมื่อเลื่อนขึ้นไปเท่านั้นแทนที่จะทำ .flipBtn ตัวเลือกมาใช้กัน .flipBtnWrapper: โฮเวอร์. flipBtn. ดังกล่าวก่อนหน้านี้ยังเปลี่ยนค่าของ rotateX () ไปยัง -180deg เพื่อให้ปุ่มพลิกไปมา.

 .flipBtn transition: transform 2s; เปลี่ยนรูปแบบ: - รักษา - 3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg); 

โปรดทราบว่าใน repo Github ฉัน เพิ่มช่องทำเครื่องหมายให้กับแต่ละปุ่ม เพื่อที่จะยิงภาพเคลื่อนไหวบน : การตรวจสอบ มากกว่าบน : เลื่อน, วิธีนี้มันจะทำงานเหมือนปุ่มจริงมากขึ้น ฉันได้รวมปุ่มสี่ปุ่มที่แตกต่างกันพร้อมปุ่มพลิกสี่ทิศทาง (ด้านบน→ล่าง, ล่าง→ด้านบน, ขวา→ซ้ายและซ้าย→ขวา) เพื่อให้คุณสามารถใช้สิ่งที่คุณต้องการได้อย่างง่ายดาย.

• ดูการสาธิต
• แหล่งดาวน์โหลด