การพลิกการ์ด 3 มิติเป็นเอฟเฟ็กต์แอนิเมชันยอดนิยมอีกรูปแบบหนึ่งซึ่งทำได้ง่ายอย่างน่าประหลาดใจ เหมือนกับการทำให้เคลื่อนไหวไปตามเส้นทาง ด้วยวิธีการใช้ภาพประกอบนี้ นักออกแบบสามารถเพิ่มข้อมูลเพิ่มเติมลงในสไลด์ได้ นอกจากนี้ การพลิกการ์ด 3 มิติยังสามารถแสดงวิธีสร้างภาพเคลื่อนไหวการพลิกปุ่ม 3 มิติด้วย CSS ฉันเห็นว่าเคยบอกผู้ซื้อออนไลน์ เช่น จะหารหัส CVC ที่จำเป็นในการป้อนข้อมูลสำหรับการเรียกเก็บเงินได้จากที่ใด
เช่นเดียวกับบทช่วยสอนล่าสุด คุณควรทราบพื้นฐานของแอนิเมชันก่อนที่จะไปยัง อาฟเตอร์เอฟเฟค. ตัวอย่างเช่น ฟีเจอร์ไทม์ไลน์ใน Photoshop เป็นวิธีเริ่มต้นที่ยอดเยี่ยม ฉันได้เรียนรู้เกี่ยวกับวิดีโอแอนิเมชั่น กราฟิกเคลื่อนไหว และ GIF ที่เคลื่อนไหวได้
วิธีสร้างแอนิเมชันพลิกปุ่ม 3 มิติด้วย CSS
แอนิเมชันพลิกแนวนอนและแนวตั้ง
ใช้คุณสมบัติเปอร์สเปคทีฟ เพื่อใช้การแปลงเปอร์สเปคทีฟกับองค์ประกอบและเนื้อหา (เปอร์สเปคทีฟ: 1,000) ตั้งค่าคุณสมบัติการเปลี่ยนเป็น”transform 0.2s”คุณสามารถกำหนดระยะเวลาที่คุณต้องการสำหรับการเปลี่ยนแปลง หากต้องการกำหนดตำแหน่งลูกขององค์ประกอบในเอฟเฟกต์ 3 มิติ ให้ใช้คุณสมบัติรูปแบบการแปลงที่ตั้งค่าเป็น”คงสภาพ 3 มิติ”บน: hover ตั้งค่าคุณสมบัติการแปลง ใช้ “rotateY(180deg)” สำหรับเอฟเฟกต์การพลิกแนวนอน และ “rotateX(180deg)” สำหรับแนวตั้ง ตั้งค่าการมองเห็น backface เป็น”ซ่อน”เพื่อไม่ให้แสดงด้านหลังขององค์ประกอบที่พลิกระหว่างภาพเคลื่อนไหว
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheets โดยเน้นที่”Style”เวอร์ชันล่าสุดคือ CSS 3 ซึ่งเน้นที่”สไตล์”ในขณะที่ Hypertext Markup Language (HTML) ใช้เพื่อจัดโครงสร้างเอกสารบนเว็บ (กำหนดสิ่งต่างๆ เช่น หัวเรื่องและย่อหน้า และให้คุณฝังรูปภาพ วิดีโอ และสื่ออื่นๆ ได้) ภาษา Cascading Style Sheet ใช้เพื่อจัดรูปแบบเอกสารของคุณ
เลย์เอาต์ของหน้า สี และฟอนต์ (โปรดพูดถึงตระกูลฟอนต์และฟอนต์สไตล์!) ตั้งค่าทั้งหมดด้วยไวยากรณ์ CSS ซึ่งหมายความว่า CSS เป็นภาษาสำคัญที่ต้องเรียนรู้หากคุณต้องการจัดสไตล์ของคุณ หน้าเว็บ. HTML เปรียบเสมือนฐานรากของบ้าน (บ้านทุกหลังมีหนึ่งหลัง) และ Cascading Style Sheets เปรียบเสมือนลักษณะของบ้าน (คฤหาสน์สไตล์วิกตอเรียนแตกต่างจากบ้านสมัยใหม่ในช่วงกลางศตวรรษอย่างมาก) หากต้องการสร้างหน้าเว็บแบบโต้ตอบ คุณต้องใช้ทั้ง HTML และ JavaScript
คำถามที่พบบ่อย
คุณสร้างภาพเคลื่อนไหว 3 มิติด้วย CSS ได้ไหม
เมื่อใช้ CSS3 คุณจะสร้างสิ่งต่างๆ ให้ซับซ้อนขึ้นได้ เช่น เอฟเฟกต์ 3 มิติและการแปลงร่างไม่เคยง่ายอย่างนี้มาก่อน คุณสมบัติ CSS3 จำนวนมากช่วยให้นักออกแบบเว็บไซต์ปรับปรุงการออกแบบเว็บไซต์และปรับปรุงประสบการณ์ผู้ใช้อย่างมาก
คุณจะพลิก 90 องศาใน CSS ได้อย่างไร
เราสามารถเพิ่มสิ่งต่อไปนี้ในแท็กเฉพาะ ใน CSS:-webkit-transform: หมุน (90deg);-moz-transform: หมุน (90deg);-o-แปลง: หมุน (90deg);-ms-แปลง: หมุน (90deg); แปลงร่าง: หมุน (90deg); ในกรณีของการหมุนครึ่งหนึ่งเปลี่ยน 90 เป็น 45
ฉันจะสร้างปุ่มเด้งใน CSS ได้อย่างไร
เขียนกฎสไตล์สำหรับปุ่มเด้ง โดยกำหนดเป้าหมายตามชื่อคลาส”bounce”โดยใช้ ตัวเลือกคลาส:.bounce { } เพิ่ม “ตำแหน่ง: สัมพันธ์” ตามสไตล์ของคุณ … กำหนดแอนิเมชัน “เด้ง” ให้กับปุ่มของคุณภายในกฎสไตล์