วิธีสร้างการออกแบบ 3 มิติด้วยคุณสมบัติการแปลง CSS3

มีสองมิติเมื่อพูดถึงคุณสมบัติการแปลง CSS3 คือ 2D และ 3D เมื่อเคลื่อนไหว การแปลงจะใช้เพื่อทำให้องค์ประกอบเปลี่ยนจากสถานะหนึ่งไปยังอีกสถานะหนึ่ง บทช่วยสอนนี้ทำหน้าที่เป็นส่วนขยายจากคู่มือนี้เกี่ยวกับภาพเคลื่อนไหว 2 มิติ ฉันจะให้ข้อมูลเชิงลึกเกี่ยวกับการออกแบบ 3 มิติและวิธีสร้างแอนิเมชันที่ยอดเยี่ยมด้วยการรวมแนวคิดพื้นฐานเหล่านี้

การแปลงร่าง 3 มิติอาจมีรายละเอียดค่อนข้างมาก และอาจซับซ้อนขึ้นได้หากมีชิ้นส่วนต่างๆ จำนวนมากรวมกัน ดังนั้นการเริ่มต้นด้วยองค์ประกอบพื้นฐานจึงมีประโยชน์ แนวคิดเหล่านี้บางส่วนอาจดูคุ้นเคย แต่ "z" เป็นสิ่งที่จะดูใหม่เมื่อทำงานในรูปแบบ 3 มิติ การแปลง 3 มิติขยายการแปลง CSS 2 มิติให้รวมแกน z ทำให้สามารถแปลงองค์ประกอบ DOM เป็น 3 มิติได้

แกน Z คืออะไร?

จะมีการอ้างถึงแกน z ค่อนข้างมาก คิดง่ายๆ ว่าเป็นระยะทางการวัดของบางสิ่งที่เข้าใกล้หรือห่างจากคุณ หากเป็นค่าบวก แสดงว่าอยู่ใกล้คุณมากขึ้น หากเป็นค่าลบ แสดงว่าอยู่ห่างจากคุณมากขึ้น

ตัวอย่างการแปลง 3 มิติ

คุณสมบัติพื้นฐานสำหรับการแปลงร่าง 3 มิติ ได้แก่ translate3d , scale3d , rotateX , rotateY , rotateZ , perspective และ matrix3d อาร์กิวเมนต์เพิ่มเติมรวมอยู่ใน translate3d , scale3d และ matrix3d ​​เนื่องจากใช้อาร์กิวเมนต์สำหรับ x, y และ z คุณสมบัติมาตราส่วนใช้ค่าสำหรับมุมและเปอร์สเปคทีฟยังใช้ค่าเดียว

แปลภาษา

แปลZ()

กำหนดการแปล 3 มิติโดยใช้ค่าแกน z เท่านั้น คุณอาจจำการแปล x และ y จากการแปลแบบ 2 มิติ แนวคิดนี้เหมือนกันกับ translateX() , translateY() และ translateZ() เพราะแต่ละค่าใช้ค่าความยาวที่ย้ายองค์ประกอบตามระยะทางที่ระบุตามแกนที่ถูกต้อง

ในตัวอย่างนี้ translateZ(-20px) จะย้ายองค์ประกอบออกห่างจากตัวแสดง 20 พิกเซล

นี่คือข้อมูลโค้ดเพื่อสร้างตัวอย่างนี้:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

แปล3d()

ฟังก์ชัน translate3d() ใช้เพื่อย้ายตำแหน่งขององค์ประกอบในพื้นที่ 3 มิติ การแปลงนี้สร้างขึ้นโดยการระบุพิกัดที่กำหนดการเคลื่อนที่ในแต่ละทิศทาง

transform: translate3d(20px, -15px, 70px); ย้ายรูปภาพ 20 พิกเซลไปตามแกน x บวก 15 พิกเซลบนแกน y ลบ จากนั้น 70 พิกเซลไปตามแกน z บวก

นี่คือตัวอย่างของ translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

เห็นได้ชัดว่ามีการทับซ้อนกันของสี่เหลี่ยมจัตุรัสที่สองเกิดขึ้น อาจดูไม่น่าทึ่งอย่างที่คาดไว้ แต่การเพิ่มคุณสมบัติเปอร์สเปคทีฟ (ภายหลังในบทช่วยสอนนี้) จะช่วยได้

หมุน

ฟังก์ชัน rotate3d() จะหมุนองค์ประกอบในพื้นที่ 3 มิติตามมุมที่กำหนดรอบแกน สิ่งนี้สามารถเขียนเป็น rotate(x, y, z, angle)

หมุน X()

ค่าพิกเซลใช้ไม่ได้ที่นี่ ต้องเป็นองศา เมธอด rotateX() จะหมุนองค์ประกอบรอบแกน x ตามองศาที่กำหนด ดูว่าสี่เหลี่ยมผืนผ้าสั้นลงอย่างไร? กำลังหมุนไปตามแกน x ตัวอย่างนี้แสดงการหมุนที่ 55 องศา

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

หมุนY()

เมธอด rotateY() จะหมุนองค์ประกอบรอบแกน y สังเกตว่าสี่เหลี่ยมผืนผ้าด้านล่างไม่กว้างเท่าด้านบน? มันถูกหมุนเพื่อให้ดูเหมือนไม่กว้างเท่าสี่เหลี่ยมผืนผ้าด้านบน เพราะมันกำลังหมุนไป 60 องศา

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

หมุนZ()

เมธอด rotateZ() จะหมุนองค์ประกอบรอบแกน z ตามองศาที่กำหนด ในกรณีนี้ ค่าคือ 120 องศา

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

หมุน 3 มิติ ()

ฟังก์ชัน rotate3d(1, -1, 1, 45deg) หมุนภาพตามแกน y เป็นมุม 45 องศา โปรดทราบว่าคุณสามารถใช้ค่าลบเพื่อหมุนองค์ประกอบไปในทิศทางตรงกันข้ามได้

เนื่องจากสิ่งนี้ซับซ้อนกว่าข้อกำหนดเฉพาะของแกนเดียว ดังนั้น rotate3d จึงแยกย่อยได้ดังนี้: rotate3d(x,y,z,angle) โดยที่ x=1, y=-1, z=1 และมุมการหมุน = 45 องศา .

รหัสสำหรับสไตล์นี้มีลักษณะดังนี้:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

การทดสอบพื้นฐาน

ตามเข็มนาฬิกาตามแนวแกน x 45 องศา

 transform: rotate3d(1, 0, 0, 45deg);

ตามเข็มนาฬิกาตามแนวแกน y 45 องศา

 transform: rotate3d(0, 1, 0, 45deg);

ตามเข็มนาฬิกาตามแกน z 45 องศา

 transform: rotate3d(0, 0, 1, 45deg);

เป็นมูลค่าการกล่าวขวัญว่าบางครั้งการหมุนจะไม่สังเกตเห็นได้ขึ้นอยู่กับค่าที่ระบุ ตัวอย่างเช่น สิ่งนี้จะไม่สังเกตเห็น: transform: rotate3d(0, 0, 0, 50deg);

ทัศนคติ

นี่อาจเป็นการเปลี่ยนแปลงที่มี "มิติ" มากที่สุด นี่คือที่ที่คุณจะได้รับมุมมองอย่างแท้จริง หากคุณใช้การแปลงแบบ 3 มิติกับองค์ประกอบโดยไม่ได้ตั้งค่าเปอร์สเปคทีฟ เอฟเฟกต์ที่ได้จะไม่ปรากฏเป็นสามมิติ นี่คือสิ่งที่สามารถเพิ่มลงในคุณสมบัติด้านบนได้เช่นกัน

ในการเปิดใช้งานพื้นที่ 3 มิติ องค์ประกอบต้องมีมุมมอง สามารถใช้ได้สองวิธี: โดยใช้คุณสมบัติ transform หรือคุณสมบัติเปอร์ perspective

คุณสมบัติ transform จะมีลักษณะดังนี้: transform: perspective(600px); และคุณสมบัติเปอร์สเปคทีฟจะมีลักษณะดังนี้: perspective: 600px; .

ตัวอย่างต่อไปนี้จะมีการเปลี่ยนแปลงระหว่างทั้งสอง ดังนั้นอย่าลืมดูโค้ดอย่างใกล้ชิด

ค่าของ perspective จะกำหนดว่าเอฟเฟกต์ 3D เข้มข้นเพียงใด คิดว่าค่าต่ำเป็นสิ่งที่สังเกตได้จริงๆ เช่น ความรู้สึกเมื่อคุณมองไปที่วัตถุขนาดใหญ่ เมื่อมีค่ามากขึ้น ผลกระทบจะรุนแรงน้อยลง

ตำแหน่งของจุดที่หายไปสามารถปรับแต่งได้เช่นกัน เป็นสิ่งที่ควรค่าแก่การกล่าวถึงและการทดลองอีกมาก เนื่องจากเกี่ยวข้องกับมุมมองของ CSS ตามค่าเริ่มต้น จุดที่หายไปของพื้นที่ 3 มิติจะอยู่ที่กึ่งกลาง ใช้คุณสมบัติจุดกำเนิดมุมมองเพื่อเปลี่ยนตำแหน่งของจุดที่หายไป มันจะมีลักษณะดังนี้: perspective-origin: 15% 55%

มาตราส่วน

สเกลZ()

สิ่งนี้กำหนดการแปลงมาตราส่วน 3 มิติโดยให้ค่าสำหรับแกน z เนื่องจากจะปรับขนาดตามแกน z เท่านั้น จึงจำเป็นต้องมีฟังก์ชันอื่นๆ เพื่อแสดงผลการปรับขนาด ดูว่าสี่เหลี่ยมผืนผ้าหันเข้าหาผู้ชมอย่างไรและมันแสดงมุมมองอย่างไร

เพื่อให้เข้าใจมาตราส่วน (Z) อย่างถ่องแท้ ลองเล่นกับค่าแล้วคุณจะเห็นมุมมองที่ "คมชัดขึ้น" ด้วยค่าที่มากขึ้น

สเกล3d(x,y,z)

ฟังก์ชัน scale3d() เปลี่ยนขนาดขององค์ประกอบและเขียนเป็น scale(x, y, z) เช่นเดียวกับ scaleZ มันไม่ชัดเจนว่าเปอร์สเป็คทีฟมีลักษณะอย่างไรเว้นแต่จะใช้กับ perspective

ตัวอย่างนี้ใช้สิ่งนี้:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

หมายเหตุโดยย่อ: หากพิกัดทั้งสามของเวกเตอร์เท่ากัน สเกลจะสม่ำเสมอและจะไม่มีความแตกต่างที่เห็นได้ชัดเจน

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

เมทริกซ์ 3d()

เมทริกซ์ 2 มิติรับได้ 6 ค่า ในขณะที่เมทริกซ์ 3 มิติรับได้ 16 (เมทริกซ์ 4×4)! มันจะเป็นโพสต์ที่ยาวมากหากรายละเอียดทั้งหมดครอบคลุม ดังนั้นหากคุณต้องการสำรวจแนวคิดนี้เพิ่มเติม ฉันขอแนะนำการทดลอง matrix3d ​​แบบโต้ตอบนี้บน Codepen

นี่ matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

วิธีสร้าง
ภาพเคลื่อนไหวพร้อมการแปลง 3 มิติ

เมื่อครอบคลุมพื้นฐานแล้ว การสร้างภาพเคลื่อนไหวเชิงโต้ตอบคือขั้นตอนต่อไป การใช้การแปลงและการเปลี่ยนผ่าน CSS3 องค์ประกอบจะเปลี่ยนจากสถานะหนึ่งไปยังอีกสถานะหนึ่งโดยการหมุน ปรับขนาด หรือเพิ่มเปอร์สเปคทีฟ

หากคุณยังใหม่กับแอนิเมชั่น CSS สิ่งสำคัญคือต้องรู้ว่าหากไม่มีการเปลี่ยนองค์ประกอบ องค์ประกอบที่ถูกเปลี่ยนจะเปลี่ยนจากสถานะหนึ่งไปยังอีกสถานะหนึ่งอย่างกะทันหัน เพื่อป้องกันสิ่งนี้ คุณสามารถเพิ่มการเปลี่ยนเพื่อให้คุณสามารถควบคุมการเปลี่ยนแปลงได้ ทำให้ดูราบรื่นขึ้น

วิธีสร้างการพลิกการ์ด

ใครไม่ชอบเล่นไพ่? ตัวอย่างนี้มีการ์ดสองด้านและคุณสามารถดูทั้งสองด้านได้โดยการพลิกการ์ดด้วยการแปลงร่าง หากคุณดูที่แท็ก body เอฟเฟกต์ส่วนใหญ่มาจากคุณสมบัติเปอร์ perspective กำหนดเป็น 500px ค่าที่ต่ำกว่าเช่น 100px จะดู "เบ้" มาก

นี่คือ HTML เริ่มต้น:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS คือสิ่งที่ทำให้มันเกิดขึ้น:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

สามารถพบได้ใน Codepen

หากคุณยังใหม่กับการแปลงร่าง สิ่งนี้อาจดูน่าสนใจสำหรับคุณ: transform: rotate(1turn); หน่วยนี้เหมาะสำหรับการ์ดของเราเพราะหน่วย "เลี้ยว" มีลักษณะเหมือนวงกลมหนึ่งวง

ฉันยังใช้การค่อยๆ เปลี่ยนเพื่อสร้างวิธีการปั่นแบบกำหนดเอง สิ่งนี้สำเร็จได้ด้วย transition: all 1s ease-in; .

คุณสมบัติ 3D อื่นในตัวอย่างข้อมูล transform-style: preserve-3d; . การรวมสิ่งนี้จะช่วยให้องค์ประกอบ "แกว่ง" ในพื้นที่สามมิติแทนที่จะอยู่กับองค์ประกอบหลัก

วิธีสร้างข้อความด้วยเอฟเฟกต์ 3 มิติ

ตัวอย่างนี้ได้รับแรงบันดาลใจจากโปสเตอร์ภาพยนตร์เก่า มีแบบอักษรที่แตกต่างกันมากมายที่สามารถใช้สไตล์ CSS ที่ยอดเยี่ยมได้ ดังนั้นเอฟเฟกต์แบบพิเศษจึงเป็นไปได้อย่างแน่นอน ข้อความนี้ใช้ rotate3d และ transform3d เพื่อให้เป็นการแปลงที่ไม่ซ้ำใคร

HTML ค่อนข้างง่าย:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

นี่คือ CSS พื้นฐาน:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

CSS แบบละเอียดและตัวอย่างเพิ่มเติมสามารถพบได้ใน Codepen

หวังว่าการแปลง CSS 3D จะนำมิติใหม่มาสู่การออกแบบของคุณ การใช้มุมมองเป็นวิธีที่ยอดเยี่ยมในการทำให้องค์ประกอบต่างๆ ดูมีมิติมากขึ้น เมื่อรวมกับการเปลี่ยนภาพ มีความเป็นไปได้มากมายในการสร้างภาพเคลื่อนไหว