CSS3 Transform 3D โดยใช้ CSS3 เพื่อสร้าง Cubes 3D แบบไดนามิก (HTML5 Practice)

ในหลักสูตรวันนี้ฉันจะแนะนำคุณเกี่ยวกับวิธีการสร้างลูกบาศก์ 3 มิติโดยใช้ CSS3 คุณสามารถเรียกดูเอฟเฟกต์จริงผ่านลิงก์ด้านล่างใช้งานปุ่มขึ้นและลงด้านซ้ายและขวาเพื่อให้ได้เอฟเฟกต์การพลิกของลูกบาศก์

เริ่มต้นด้วยวิธีการทำ

<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

คุณสมบัติมุมมอง-ต้นกำเนิดกำหนดต้นกำเนิดของมุมมอง

#การทดลอง {

-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 ใบหน้าของลูกบาศก์

.ใบหน้า {

ตำแหน่ง: สัมบูรณ์;

ความสูง: 360px;

ความกว้าง: 360px;

Padding: 20px;

พื้นหลังสี: RGBA (50, 50, 50, 0.7);

-

ถัดไปตั้งค่าคุณสมบัติที่เกี่ยวข้องกับ 3 มิติของใบหน้า 6 หน้าใช้ Rotatex หรือ Rotatey เพื่อให้ได้พลิกของพื้นผิวลูกบาศก์และใช้ Translatez เพื่อให้ได้การเคลื่อนที่ของพื้นผิวลูกบาศก์ในพื้นที่ 3 มิติ

#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);

}, เท็จ);

นั่นคือทั้งหมดสำหรับหลักสูตรคุณสามารถลองใช้งานต่อไป