วิธีการสร้างภาพเคลื่อนไหวพลิกปุ่ม 3D ด้วย CSS
พลิกภาพเคลื่อนไหว เป็นเอฟเฟกต์ CSS ยอดนิยมที่แสดง ทั้งด้านหน้าและด้านหลัง ขององค์ประกอบ HTML โดยการเปลี่ยนจากด้านบนไปด้านล่างหรือจากซ้ายไปขวา (และในทางกลับกัน) พวกมันมีรัศมี 2 มิติ แต่จะเย็นกว่าเมื่อแสดงใน 3D.
ในโพสต์นี้ฉันจะแสดงวิธีการ สร้างปุ่ม 3D อย่างง่าย, และ เพิ่มภาพเคลื่อนไหวพลิก ถึงพวกเขา.
คุณสามารถดูผลลัพธ์ได้จากตัวอย่างด้านล่างหากคุณคลิกที่ปุ่มพวกเขาจะแสดงภาพเคลื่อนไหวฝาพับ.
1. การสร้าง HTML สำหรับปุ่ม 3D
ในการสร้างปุ่ม 3D (ด้วย Top → Bottom flip) อันดับแรกเราจะสแต็กสามปุ่ม เราตั้งค่า เราเพิ่มภาพพื้นหลังให้กับใบหน้าด้านหน้าและปุ่มย้อนกลับและตั้งค่าการไล่ระดับสีเชิงเส้นเย็น ๆ ด้านหลังภาพสำหรับทั้งสอง เคล็ดลับที่นี่ก็คือใน CSS คุณสามารถตั้งค่าหลายภาพเป็นภาพพื้นหลังสำหรับองค์ประกอบเดียวกันและคุณยังสามารถประกาศการไล่ระดับสีเป็นภาพพื้นหลัง. ตรงกลางใบหน้า, ไปยัง ครอบคลุมพื้นที่ ระหว่างด้านหน้าและด้านหลังกับใบหน้าตรงกลางเรา วางหน้าตรงกลางราบ ข้ามระนาบ x ของพื้นที่ 3D โดยใช้ เนื่องจากใบหน้าตรงกลางวางราบทั่วระนาบ x จุดสูงสุดของแกน y นั้นคือ 10px (ครึ่งหนึ่งของความสูง) ลงมาจากเดิม ดังนั้นในการดึงมันกลับมาและจัดแนวด้านบนให้ตรงกับปุ่มอีกสองหน้าฉันจึงเพิ่ม ฉันใช้ จนถึงตอนนี้คุณจะเห็นหน้าด้านหน้าบนหน้าจอเท่านั้นเนื่องจาก x-plane ถูกซ่อนจากมุมมองและบนหน้าจอ y-plane (หน้าจอ) ใบหน้าสุดท้ายที่วางลงคือด้านหน้า. โดยการหมุนปุ่ม คุณจะสามารถมองเห็นใบหน้าอื่น ๆ ได้เช่นกัน. คุณสมบัติ CSS รูปแบบการแปลงกำหนดว่าองค์ประกอบลูกขององค์ประกอบ HTML จะแสดงแบบแบนหรือตำแหน่งในพื้นที่ 3D ในข้อมูลโค้ดด้านล่าง โปรดทราบว่าฉันใช้ อย่างไรก็ตามในขั้นตอนต่อไปเราจะเปลี่ยนเป็น ณ จุดนี้ปุ่ม 3D ของเรายังคงไม่เคลื่อนไหว เราสามารถทำได้โดยใช้ มาทำให้ปุ่มหมุนเมื่อเลื่อนขึ้นไปเท่านั้นแทนที่จะทำ โปรดทราบว่าใน repo Github ฉัน เพิ่มช่องทำเครื่องหมายให้กับแต่ละปุ่ม เพื่อที่จะยิงภาพเคลื่อนไหวบน .flipBtn
คอนเทนเนอร์ที่จะทำงานเป็นปุ่ม 3D และเราวางปุ่ม 3D ลงใน .flipBtnWrapper
เสื้อคลุม.
2. การเพิ่มสไตล์พื้นฐานด้วย CSS
ความกว้าง
และ ความสูง
คุณสมบัติของ wrapper, ปุ่ม, และปุ่มจะปรากฏขึ้น, และจัดวางตำแหน่งโดยใช้เทคนิคการจัดตำแหน่งแบบสัมพัทธ์ / สัมบูรณ์. .flipBtnWrapper width: 200px; ความสูง: 200px; ตำแหน่ง: ญาติ; .flipBtn, .flipBtn_face width: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์;
3. สไตล์ใบหน้า 3 ปุ่ม
.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;
แปลง: rotateX (90deg);
กฎที่ ทำให้มันตั้งฉาก ไปที่ทั้งปุ่มด้านหน้าและปุ่มหันหน้าเข้าหา y-plane.ด้านบน: -10px
กฎเช่นกัน.backface การมองเห็น
คุณสมบัติ CSS สำหรับด้านหน้าดังนั้นเมื่อเราพลิกปุ่มด้านหลังของด้านหน้าจะไม่สามารถมองเห็นได้.4. หมุนปุ่ม
เปลี่ยนรูปแบบ: - รักษา - 3d;
กฎให้ปริมาณ 3D กับปุ่มของเราในขณะที่ แปลง: rotatexX ()
คุณสมบัติหมุนรอบ ๆ แกน x. .flipBtn transform-style :erve-3d; แปลง: rotateX (-120deg);
-120deg
เพียงเพื่อจุดประสงค์ในการสาธิตเนื่องจากวิธีนี้ง่ายขึ้นที่จะแสดงให้เห็นว่าการหมุนปุ่มทำงานอย่างไร.-180deg
เพื่อให้ปุ่มพลิกไปมาอย่างสมบูรณ์.5. การเคลื่อนไหวปุ่ม
การเปลี่ยนแปลง
คุณสมบัติ เราใช้ แปลง
property สำหรับค่าแรกเนื่องจากเป็นคุณสมบัติที่เราต้องการใช้เอฟเฟกต์การเปลี่ยนแปลงสำหรับ ค่าที่สองคือระยะเวลา, 2s
..flipBtn
ตัวเลือกมาใช้กัน .flipBtnWrapper: โฮเวอร์. flipBtn
. ดังกล่าวก่อนหน้านี้ยังเปลี่ยนค่าของ rotateX ()
ไปยัง -180deg
เพื่อให้ปุ่มพลิกไปมา. .flipBtn transition: transform 2s; เปลี่ยนรูปแบบ: - รักษา - 3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: การตรวจสอบ
มากกว่าบน : เลื่อน
, วิธีนี้มันจะทำงานเหมือนปุ่มจริงมากขึ้น ฉันได้รวมปุ่มสี่ปุ่มที่แตกต่างกันพร้อมปุ่มพลิกสี่ทิศทาง (ด้านบน→ล่าง, ล่าง→ด้านบน, ขวา→ซ้ายและซ้าย→ขวา) เพื่อให้คุณสามารถใช้สิ่งที่คุณต้องการได้อย่างง่ายดาย.