3D เริ่มต้น CSS3
ในการเล่น 3D ของ CSS3 คุณต้องเข้าใจคำศัพท์หลายคำเช่นมุมมองการหมุนและการแปล มุมมองหมายถึงการดูสิ่ง 2D บนหน้าจอจากมุมมองที่สมจริงดังนั้นจึงแสดงผลของ 3D การหมุนไม่ได้เป็นการหมุนบนระนาบ 2D อีกต่อไป แต่การหมุนของระบบพิกัดสามมิติรวมถึงแกน x แกน y และการหมุนแกน z เช่นเดียวกันสำหรับการแปล
แน่นอนว่าการใช้ทฤษฎีเพื่ออธิบายคุณอาจไม่เข้าใจ นี่คือ 3 gifs:
หมุนไปตามแกน x
หมุนไปตามแกน y
หมุนไปตามแกน z
ไม่ควรมีปัญหากับการหมุนดังนั้นจึงง่ายต่อการเข้าใจการแปลนั่นคือย้ายไปที่แกน x แกน y และแกน z
คุณอาจพูดว่ามุมมองนั้นยากที่จะเข้าใจ ให้ฉันแนะนำคุณลักษณะหลายประการของมุมมอง
ทัศนคติ
ชื่อภาษาอังกฤษของมุมมองคือมุมมอง หากไม่มีสิ่งนี้จะไม่มีวิธีสร้างเอฟเฟกต์ 3 มิติ แต่สิ่งนี้อนุญาตให้เบราว์เซอร์ของเราสร้างเอฟเฟกต์ 3 มิติได้อย่างไร คุณสามารถดูภาพด้านล่าง ในความเป็นจริงผู้ที่เรียนรู้ภาพวาดควรรู้ถึงความสัมพันธ์ในมุมมองและนี่คือเหตุผล
แต่ใน CSS มันมีค่าตัวเลขเช่น 1000px เป็นตัวแทนของอะไร? เราสามารถเข้าใจวิธีนี้ได้ว่าถ้าเราดูวัตถุโดยตรงวัตถุจะครอบงำและครอบครองสายตาของเรา ระยะทางของเรานั้นใหญ่ขึ้นเรื่อย ๆ และความรู้สึกสามมิติจะปรากฏขึ้น ในความเป็นจริงค่านี้สร้างระยะห่างระหว่างดวงตาของเราและหน้าจอซึ่งสร้างภาพลวงตา 3 มิติเสมือนจริง
มุมมองที่มาจากต้นกำเนิด
จากข้างต้นเราเข้าใจมุมมองและเพิ่มสิ่งที่มานี้ สิ่งที่เราพูดถึงก่อนหน้านี้คือระยะทางจากวัตถุและนี่คือเส้นสายตาของดวงตา ตำแหน่งที่แตกต่างกันของมุมมองของเราจะกำหนดฉากต่าง ๆ ที่เราเห็น ค่าเริ่มต้นคือศูนย์กลางซึ่งเป็นมุมมอง: 50% 50% ค่าแรกคือแกน x ซึ่งเป็นองค์ประกอบ 3D และตำแหน่งที่สองถูกกำหนดไว้ในแกน y
เมื่อกำหนดคุณลักษณะมุมมองของต้นกำเนิดสำหรับองค์ประกอบองค์ประกอบลูกของมันจะได้รับผลกระทบมุมมองไม่ใช่องค์ประกอบของตัวเอง ต้องใช้กับแอตทริบิวต์มุมมองและมีผลต่อองค์ประกอบการแปลง 3 มิติเท่านั้น (W3School)
การแปลงรูปแบบ
มุมมองอยู่ที่นี่อีกครั้ง ใช่มันเป็นกุญแจสำคัญในการ 3D ใน CSS รูปแบบการแปลงนั้นแบนโดยค่าเริ่มต้น หากคุณต้องการเห็นเอฟเฟกต์ 3 มิติต่อองค์ประกอบคุณต้องใช้สไตล์การแปลง: PRESERVE-3D มิฉะนั้นมันเป็นเพียงการแปลงเครื่องบินไม่ใช่การแปลง 3 มิติ
พาคุณไปเล่นกับ CSS3-3D ทีละขั้นตอน
เรามีความเข้าใจเล็กน้อยเกี่ยวกับแนวคิดข้างต้นดังนั้นให้เริ่มการต่อสู้จริงด้านล่าง!
มาดูเอฟเฟกต์กันเถอะมันไม่เจ๋ง: เยี่ยมชม https://bupt-hjm.github.io/css3-3d/ โดยตรงถ้าคุณคิดว่ามันโอเค
ขั้นตอนที่ 1: โครงสร้าง HTML
ภาชนะที่เรียบง่ายมากห่อด้วยกล่องชิ้นส่วนที่มี 6 ชิ้น
<div> <div> <div> </div> <div> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
ขั้นตอนที่ 2: เพิ่มแอตทริบิวต์ 3D ที่จำเป็นเพื่อเข้าสู่โลก 3D
ผ่านคำอธิบายข้างต้นคุณควรคุ้นเคยกับมุมมองมากขึ้น
/*container*/.container {-webkit -perspective: 1000px; -moz-Perspective: 1000px; -ms-perspective: 1000px; มุมมอง: 1000px;}/*กล่องชิ้นส่วน*/ .piece-box {Perspective-Origin: 50% 50%; -webkit-transform-style: Preserve-3d; -moz-transform-style: Preserve-3d; -ms-transform-style: Preserve-3d; Transform-style: Preserve-3d;}ขั้นตอนที่ 3: เพิ่มสไตล์ที่จำเป็น
/*container*/.container {-webkit -perspective: 1000px; -moz-Perspective: 1000px; -ms-perspective: 1000px; มุมมอง: 1000px;}/*กล่องชิ้นส่วน*/. piece-box {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 200px; ความสูง: 200px; มาร์จิ้น: 300px auto; มุมมอง-ต้นกำเนิด: 50% 50%; -webkit-transform-style: Preserve-3d; -moz-transform-style: Preserve-3d; -ms-transform-style: Preserve-3d; Transform-style: Preserve-3d;}/*Piece Piece Style*/. Piece {ตำแหน่ง: Absolute; ความกว้าง: 200px; ความสูง: 200px; ความเป็นมา: สีแดง; ความทึบ: 0.5;}. piece-1 {พื้นหลัง: #ff6666;}. piece-2 {พื้นหลัง: #fff00;}. piece-3 {พื้นหลัง: #006699;}. piece-4 {พื้นหลัง: #009999;แน่นอนหลังจากที่คุณทำขั้นตอนนี้เสร็จแล้วคุณยังเห็นเพียงสี่เหลี่ยมซึ่งเป็นชิ้นส่วนของเราเพราะการแปลง 3 มิติของเรายังไม่ได้เริ่มต้น
ขั้นตอนที่ 4: การโจมตีการแปลง 3D
สิ่งแรกคือการตระหนักถึงตะเกียงหมุน เราไม่ควรปล่อยมันไปก่อนตระหนักถึงส่วนของแสง
จะบรรลุได้อย่างไร? เนื่องจากเป็นวงกลมวงกลมคือ 360 องศาและเรามี 6 ชิ้นดังนั้นจึงเป็นเรื่องง่ายที่จะคิดว่าเราต้องหมุนแต่ละชิ้นในการเพิ่มขึ้น 60 องศาและมันจะกลายเป็นดังนี้
จะดึงพวกเขาออกจากศูนย์ได้อย่างไร?
ที่นี่เราควรทราบว่าหลังจากเราหมุนองค์ประกอบรอบแกน y แกน x และ z จะหมุนจริงดังนั้นเส้นแนวตั้งของแต่ละหน้าของลูกบาศก์ยังคงเป็นแกน z เราต้องเปลี่ยนค่าของ Translatez เท่านั้น เมื่อ Translatez เป็นบวกเราเดินไปในทิศทางของเราเพื่อที่เราจะได้ดึงมันออกจากกัน
แต่จะวัดระยะทางได้อย่างไร?
มันชัดเจนอย่างรวดเร็วหรือไม่?
มาปรับเปลี่ยน CSS กันเถอะ
.piece-1 {พื้นหลัง: #ff6666; -webkit-transform: Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: rotatey (0deg) translatez (173.2px);}. piece-2 {พื้นหลัง: #fff00; -webkit-transform: Rotatey (60deg) Translatez (173.2px); -ms-transform: Rotatey (60deg) Translatez (173.2px); -O-Transform: Rotatey (60Deg) Translatez (173.2px); แปลง: Rotatey (60Deg) Translatez (173.2px);}. piece-3 {พื้นหลัง: #006699; -webkit-transform: Rotatey (120deg) Translatez (173.2px); -ms-transform: Rotatey (120deg) Translatez (173.2px); -O-Transform: Rotatey (120Deg) Translatez (173.2px); -O-Transform: Rotatey (120Deg) Translatez (173.2px); แปลง: rotatey (120deg) translatez (173.2px);}. piece-4 {พื้นหลัง: #009999; -webkit-transform: Rotatey (180deg) Translatez (173.2px); -ms-transform: Rotatey (180deg) Translatez (173.2px); -O-Transform: Rotatey (180Deg) Translatez (173.2px); แปลง: Rotatey (180deg) Translatez (173.2px);}. piece-5 {พื้นหลัง: #ff0033; -webkit-transform: Rotatey (240deg) Translatez (173.2px); -ms-transform: Rotatey (240deg) Translatez (173.2px); -O-Transform: Rotatey (240deg) Translatez (173.2px); แปลง: Rotatey (240deg) Translatez (173.2px);}. piece-6 {พื้นหลัง: #ff6600; -webkit-transform: Rotatey (300deg) Translatez (173.2px); -ms-transform: Rotatey (300deg) Translatez (173.2px); -O-Transform: Rotatey (300Deg) Translatez (173.2px); แปลง: Rotatey (300deg) Translatez (173.2px);}มีการรับรู้โคมไฟหมุนเวียนหรือไม่?
ขั้นตอนที่ 5: แอนิเมชั่นทำให้ 3 มิติเคลื่อนไหว
เพื่อให้ได้โคมไฟที่เคลื่อนไหวได้จริง ๆ แล้วมันง่ายมาก เราเพียงแค่ต้องเพิ่มภาพเคลื่อนไหวการหมุนลงในกล่องชิ้นส่วน กรอกภาพเคลื่อนไหวใน 5 วินาทีหมุนจาก 0 องศาเป็น 360 องศา
/*กล่องชิ้นส่วน*/. piece-box {ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 200px; มาร์จิ้น: 300px auto; มุมมอง-ต้นกำเนิด: 50% 50%; -webkit-transform-style: Preserve-3d; -moz-transform-style: Preserve-3d; -ms-transform-style: Preserve-3d; Transform-style: Preserve-3d; แอนิเมชั่น: piecterotate 5s; -moz-Animation: piecterotate 5s; / * firefox */ -webkit -animation: piecterotate 5s; / * Safari และ Chrome */ -o -animation: piecterotate 5s; /*โอเปร่า*/}/*แอนิเมชั่นโคมไฟหมุนเวียน*/@keyframes piecheerotate {0% {-webkit-transform: rotatey (0deg); -MS-TRANSFORM: ROTATEY (0DEG); -O-Transform: Rotatey (0deg); แปลง: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -MS-TRANSFORM: ROTATEY (360DEG); -O-Transform: Rotatey (360Deg); แปลง: rotatey (360Deg);}}/ * firefox */@-moz-keyframes piecterotate {0% {-webkit-transform: Rotatey (0deg); -MS-TRANSFORM: ROTATEY (0DEG); -O-Transform: Rotatey (0deg); แปลง: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -MS-TRANSFORM: ROTATEY (360DEG); -O-Transform: Rotatey (360Deg); แปลง: rotatey (360Deg);}}/ * Safari และ Chrome */@-WebKit-KeyFrames Piecterotate {0% {-webkit-transform: Rotatey (0deg); -MS-TRANSFORM: ROTATEY (0DEG); -O-Transform: Rotatey (0deg); แปลง: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -MS-TRANSFORM: ROTATEY (360DEG); -O-Transform: Rotatey (360Deg); แปลง: rotatey (360Deg);}}/ * opera */@-o-keyframes piecterotate {0% {-webkit-transform: Rotatey (0deg); -MS-TRANSFORM: ROTATEY (0DEG); -O-Transform: Rotatey (0deg); แปลง: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -MS-TRANSFORM: ROTATEY (360DEG); -O-Transform: Rotatey (360Deg); แปลง: rotatey (360deg);}}ฉันจะไม่ใส่ GIF ที่นี่ ~ HHH จะได้เอฟเฟกต์เย็นหรือไม่? มันยังไม่จบ ~ ประกอบคิวบ์ที่เย็นกว่า
จริงๆแล้วมันไม่ใช่เรื่องยากที่จะใช้ลูกบาศก์ ฉันจะไม่เข้าไปดูรายละเอียดที่นี่ ก่อนอื่นคุณสามารถจินตนาการถึงใบหน้าแล้วขยายใบหน้าอื่น ๆ เพื่อนำไปใช้ ตัวอย่างเช่นเราวางด้านหน้าแปล (100px) ของลูกบาศก์ใกล้กับ 100px ของเราจากนั้นแปล (-100px) จากนั้นย้ายออกจาก 100px ของเรา ทางด้านซ้ายคือ translatex (-100px จากนั้น rotatey (90deg) ทางด้านขวาคือ translatex (100px) จากนั้น rotatey (90deg) ด้านบนคือ translatey (-100px), rotatex (90deg) ที่ด้านล่าง (90deg)
CSS มีดังนี้ ต่อไปนี้เป็นเพียงชิ้นส่วน 1 ผู้อ่านรายอื่นสามารถใช้งานได้ด้วยตัวเองหรือดูซอร์สโค้ด GitHub ของฉัน
.piece-1 {พื้นหลัง: #ff6666; -webkit-transform: Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: Rotatey (0deg) Translatez (173.2px); แอนิเมชั่น: Piece1rotate 5s 5s; -moz-animation: piece1rotate 5s 5s; / * firefox */ -webkit -animation: piece1rotate 5s 5s; / * Safari และ Chrome */ -o -Animation: Piece1rotate 5s 5s; / * Opera */ -webkit-Animation-Fill-Mode: Forwards; / * Chrome, Safari, Opera */ Animation-Fill-Mode: Forwards; }/*front*/ @keyframes piece1rotate {0% {-webkit-transform: Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: Rotatey (0deg) Translatez (173.2px);} 100% {-webkit-transform: Rotatey (0deg) Translatez (100px); -ms-transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); แปลง: rotatey (0deg) translatez (100px);}} / * firefox * / @-moz-keyframes piece1rotate {0% {-webkit-transform: rotatey (0deg) translatez (100px);}} / * firefox * / @-moz-key Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: Rotatey (0deg) Translatez (173.2px);} 100% {-webkit-transform: Rotatey (0deg) Translatez (100px); -ms-transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); แปลง: Rotatey (0deg) Translatez (100px); แปลง: Rotatey (0deg) Translatez (100px); Translatez (100px);}} / * Safari และ Chrome * / @-webkit-keyframes piece1rotate {0% {-webkit-transform: Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: Rotatey (0deg) Translatez (173.2px);} 100% {-webkit-transform: Rotatey (0deg) Translatez (100px); -ms-transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); แปลง: rotatey (0deg) translatez (100px);}} / * opera * / @-o-keyframes piece1rotate {0% {-webkit-transform: Rotatey (0deg) Translatez (173.2px); -ms-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); -O-transform: Rotatey (0deg) Translatez (173.2px); แปลง: Rotatey (0deg) Translatez (173.2px);} 100% {-webkit-transform: Rotatey (0deg) Translatez (100px); -ms-transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); -O-Transform: Rotatey (0deg) Translatez (100px); แปลง: rotatey (0deg) translatez (100px);}}ผู้อ่านอย่างระมัดระวังสามารถพบได้ว่าฉันใช้โหมดการเติมแอนิเมชั่น: ส่งต่อ; ซึ่งเป็นจริงเพื่อให้ชิ้นส่วนเหล่านี้อยู่ในเอฟเฟกต์ภาพเคลื่อนไหวขั้นสุดท้ายนั่นคือผลกระทบของลูกบาศก์ ผู้อ่านสามารถลองได้โดยไม่ต้องลองและมันจะยังคงได้รับการฟื้นฟูสู่สถานะเดิม
ในที่สุดลูกบาศก์จะหมุน คอนเทนเนอร์ของเราด้านหน้าได้ใช้แอนิเมชั่นแล้ว ผู้อ่านอาจคิดว่าฉันสามารถเพิ่มชั้นเรียนและใส่อนิเมชั่น HHH, Animaiton จะครอบคลุมด้านหน้าและแอนิเมชั่นของโคมไฟหน้าจะหายไป ดังนั้นในโครงสร้าง HTML ฉันเพิ่มชิ้นส่วนห่อกล่องอีกชิ้นดังต่อไปนี้
<div> <div> <div> <!-คอนเทนเนอร์ใหม่-> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
ในแอนิเมชั่นเราสามารถควบคุมเวลาหน่วงของแอนิเมชั่นคิวบ์นั่นคือรอจนกว่าชุดประกอบคิวบ์จะเสร็จสมบูรณ์ก่อนที่จะเริ่มภาพเคลื่อนไหว
แอนิเมชั่น: Boxrotate 5s 10s ไม่มีที่สิ้นสุด; 5s แรกคือระยะเวลาการเคลื่อนไหว 10s ที่สองคือเวลาหน่วงและจากนั้นเราปล่อยให้ลูกบาศก์หมุนจาก 0 องศาถึง 360 องศารอบแกน x และจาก 0 ถึง 360 องศารอบแกน y
.piece-box2 {-webkit-transform-style: Preserve-3d; -moz-transform-style: Preserve-3d; -ms-transform-style: Preserve-3d; Transform-style: Preserve-3d; แอนิเมชั่น: Boxrotate 5s 10s ไม่มีที่สิ้นสุด; -moz-animation: Boxrotate 5s 10s Infinite; / * firefox */ -webkit -animation: Boxrotate 5S 10S ไม่มีที่สิ้นสุด; / * Safari และ Chrome */ -o -animation: Boxrotate 5S 10s ไม่มีที่สิ้นสุด; /*โอเปร่า*/}/*แอนิเมชั่นการหมุนแบบลูกบาศก์*/@keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) Rotatey (0deg);); -ms-transform: Rotatex (0deg) Rotatey (0deg);); -O-Transform: Rotatex (0deg) Rotatey (0deg);););); แปลง: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: Rotatex (360deg) Rotatey (360deg); -MS-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG); -O-Transform: Rotatex (360deg) Rotatey (360deg); แปลง: rotatex (360deg) rotatey (360deg);}}/ * firefox */@-moz-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg););); -ms-transform: Rotatex (0deg) Rotatey (0deg);); -O-Transform: Rotatex (0deg) Rotatey (0deg);););); แปลง: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: Rotatex (360deg) Rotatey (360deg); -MS-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG); -O-Transform: Rotatex (360deg) Rotatey (360deg); แปลง: rotatex (360deg) rotatey (360deg);}}/ * Safari และ Chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg););); -ms-transform: Rotatex (0deg) Rotatey (0deg);); -O-Transform: Rotatex (0deg) Rotatey (0deg);); Rotatex (0deg) Rotatey (0deg);); แปลง: rotatex (0deg) rotatey (0deg););} 100% {-webkit-transform: Rotatex (360deg) Rotatey (360deg); -MS-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG); -O-Transform: Rotatex (360deg) Rotatey (360deg); แปลง: rotatex (360deg) rotatey (360deg);}}/ * opera */@-o-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: Rotatex (0deg) Rotatey (0deg);); -O-Transform: Rotatex (0deg) Rotatey (0deg);); แปลง: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: Rotatex (360deg) Rotatey (360deg); -MS-TRANSFORM: ROTATEX (360DEG) ROTATEY (360DEG); -O-Transform: Rotatex (360deg) Rotatey (360deg); แปลง: rotatex (360deg) rotatey (360deg);}}เอฟเฟกต์สุดท้ายเสร็จสมบูรณ์!
ข้างต้นเป็นตัวอย่างของการใช้งาน CSS 3D นักเรียนที่ต้องการความต้องการสามารถอ้างถึงได้ ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!