ในหลักสูตรวันนี้ฉันจะแนะนำคุณเกี่ยวกับวิธีการสร้างลูกบาศก์ 3 มิติโดยใช้ CSS3 คุณสามารถเรียกดูเอฟเฟกต์จริงผ่านลิงก์ด้านล่างใช้งานปุ่มขึ้นและลงด้านซ้ายและขวาเพื่อให้ได้เอฟเฟกต์การพลิกของลูกบาศก์
ที่อยู่ตัวอย่าง : http://www.cuoxin.com/jiaoben/70022.htmlเริ่มต้นด้วยวิธีการทำ
html :<div id = "การทดลอง">
<div id = "cube">
<div>
ใบหน้าเดียว
</div>
<div>
ขึ้นลงซ้ายขวา
</div>
<div>
Lorem Ipsum
</div>
<div>
การนำทางรูปแบบใหม่นั้นสนุก
</div>
<div>
หมุนลูกบาศก์ 3 มิติ
</div>
<div>
เนื้อหาเพิ่มเติม
</div>
</div>
</div>
ใน HTML ด้านบน 6 divs ที่มีชั้นเรียนเป็นใบหน้าเป็นตัวแทนของใบหน้าทั้ง 6 ของลูกบาศก์และพวกเขาจะโดดเด่นโดยใช้ชื่อคลาสจากหนึ่งถึงหก คอนเทนเนอร์ภายนอกมีคอนเทนเนอร์สองชั้นพร้อม ID Cube และการทดลอง ทั้งสองชั้นมีความจำเป็น หากไม่มีใครจะไม่สามารถสร้างเอฟเฟกต์ 3D ได้
ในหมู่พวกเขาการทดลองมีบทบาทของเลนส์ ตั้งค่าความยาวโฟกัสเพื่อให้สามารถแสดงเอฟเฟกต์ 3D บนองค์ประกอบภายใน
แอตทริบิวต์มุมมองกำหนดความลึกของระนาบ Z-Axis และกำหนดขนาดสัมพัทธ์ขององค์ประกอบด้านบนและด้านล่างของระนาบ โดยทั่วไปค่ามุมมองที่เล็กลงยิ่งวัตถุที่ใหญ่ขึ้นเท่าไหร่ก็ยิ่งใกล้กับคุณมากขึ้นเท่านั้น ยิ่งค่ามุมมองที่ใหญ่ขึ้นวัตถุที่เล็กลงเท่าไหร่คุณก็ยิ่งอยู่ห่างจากคุณเท่านั้น คุณสามารถดูเอฟเฟกต์ผ่าน http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html
คุณสมบัติมุมมอง-ต้นกำเนิดกำหนดต้นกำเนิดของมุมมอง
CSS :#การทดลอง {
-webkit-Perspective: 800;
-moz-Perspective: 800;
-O-Perspective: 800;
มุมมอง: 800;
-webkit-Perspective-Origin: 50% 200px;
-moz-Perspective-Origin: 50% 200px;
-O-Perspective-Origin: 50% 200px;
มุมมอง-ต้นฉบับ: 50% 200px;
-
คุณสมบัติที่กำหนดโดยลูกบาศก์มีความกว้างและความสูงคงที่และตั้งตำแหน่งเป็นสัมพัทธ์ ความสูงและความกว้างคงที่เป็นสิ่งจำเป็นเพื่อให้องค์ประกอบในคิวบ์สามารถแสดงภาพเคลื่อนไหว 3 มิติภายในพื้นที่ที่กำหนด หากคุณตั้งค่าความสูงและความกว้างเป็น 100%องค์ประกอบในคิวบ์จะเคลื่อนที่ข้ามช่วงหน้าทั้งหมด
การเปลี่ยนแปลงใช้เพื่อตั้งค่าคุณสมบัติที่เกี่ยวข้องกับภาพเคลื่อนไหว Transform-style: Preserve-3d; ทำให้องค์ประกอบทั้งหมดในลูกบาศก์ผลิตเอฟเฟกต์ 3 มิติโดยรวม
คุณสามารถเรียกดู http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-perspective-animate-transition/ สำหรับข้อมูลเพิ่มเติม
CSS:
#cube {
ตำแหน่ง: ญาติ;
มาร์จิ้น: 100px auto;
ความสูง: 400px;
ความกว้าง: 400px;
-webkit-transition: -webkit-transform 2S linear;
-MOZ-TRANSITION: -MOZ-TRANSFORM 2S เชิงเส้น;
-O-Transition: -O-transform 2S linear;
การเปลี่ยนแปลง: แปลง 2S เชิงเส้น;
-webkit-transform-style: Preserve-3d;
-moz-transform-style: Preserve-3d;
-O-transform-style: PRESERVE-3D;
Transform-style: Preserve-3d;
-
ถัดไปตั้งค่าแอตทริบิวต์ CSS สำหรับ 6 ใบหน้าของลูกบาศก์
CSS :.ใบหน้า {
ตำแหน่ง: สัมบูรณ์;
ความสูง: 360px;
ความกว้าง: 360px;
Padding: 20px;
พื้นหลังสี: RGBA (50, 50, 50, 0.7);
-
ถัดไปตั้งค่าคุณสมบัติที่เกี่ยวข้องกับ 3 มิติของใบหน้า 6 หน้าใช้ Rotatex หรือ Rotatey เพื่อให้ได้พลิกของพื้นผิวลูกบาศก์และใช้ Translatez เพื่อให้ได้การเคลื่อนที่ของพื้นผิวลูกบาศก์ในพื้นที่ 3 มิติ
CSS :#cube. one {
-webkit-transform: Rotatex (90deg) Translatez (200px);
-moz-transform: Rotatex (90deg) Translatez (200px);
-O-Transform: Rotatex (90deg) Translatez (200px);
แปลง: ROTATEX (90DEG) Translatez (200px);
-
#cube. สอง {
-webkit-transform: Translatez (200px);
-moz-transform: Translatez (200px);
-O-Transform: Translatez (200px);
แปลง: Translatez (200px);
-
#cube. Three {
-webkit-transform: Rotatey (90deg) Translatez (200px);
-moz-transform: Rotatey (90deg) Translatez (200px);
-O-Transform: Rotatey (90Deg) Translatez (200px);
แปลง: Rotatey (90deg) Translatez (200px);
-
#cube .four {
-webkit-transform: Rotatey (180deg) Translatez (200px);
-moz-transform: Rotatey (180deg) Translatez (200px);
-O-Transform: Rotatey (180Deg) Translatez (200px);
แปลง: Rotatey (180deg) Translatez (200px);
-
#cube .five {
-webkit-transform: Rotatey (-90deg) Translatez (200px);
-moz-transform: Rotatey (-90deg) Translatez (200px);
-O-Transform: Rotatey (-90Deg) Translatez (200px);
แปลง: Rotatey (-90Deg) Translatez (200px);
-
#cube .six {
-webkit-transform: Rotatex (-90deg) Translatez (200px);
-moz-transform: Rotatex (-90deg) Translatez (200px);
-O-Transform: Rotatex (-90Deg) Translatez (200px);
แปลง: rotatex (-90deg) Translatez (200px);
-
สิ่งสุดท้ายที่ต้องทำคือผูกเหตุการณ์คีย์ดาวน์กับหน้าดังนั้นเมื่อคุณกดปุ่มขึ้น, ลง, ซ้ายและขวาปุ่มการเคลื่อนไหวแบบคิวบ์จะทำได้
JavaScript:
var xangle = 0, yangle = 0;
document.addeventListener ('keydown', function (e)
-
สวิตช์ (E.KeyCode)
-
กรณี 37: // ซ้าย
Yangle -= 90;
หยุดพัก;
กรณี 38: // ขึ้น
xangled += 90;
หยุดพัก;
กรณี 39: // ถูกต้อง
Yangle += 90;
หยุดพัก;
กรณี 40: // ลง
xangle -= 90;
หยุดพัก;
-
$ ('Cube'). style.webkittransform = "rotatex ("+xangled+"deg) rotatey ("+yangle+"deg);
}, เท็จ);
นั่นคือทั้งหมดสำหรับหลักสูตรคุณสามารถลองใช้งานต่อไป