เทคนิคการทำภาพ 3D แยกส่วนแบบเท่ๆ ด้วย HTML&CSS

Published in

codesxdiary

3 min readMay 9, 2020

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

👇ถ้าใครยังนึกภาพไม่ออกว่าคืออะไร ลองกดเข้าไปเล่นที่เว็ปก่อนได้เลย 👇
https://nueymoo.github.io/3d-layers/

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

เมื่อได้ชุดภาพที่ต้องการมาแล้ว เราจะต้องให้รูปทุกรูปอยู่ซ้อนกันทั้งหมดโดยวิธีการทำก็คือ เราจะเอา class layers ครอบรูปทั้งหมดไว้

<div class="layers">
  <img src="layer5.png" alt="backscreen" class="backscreen layer6">
  <img src="layer5.png" alt="backscreen" class="backscreen layer5">
  <img src="layer4-monitor.png" alt="monitor layer" class="layer4">
  <img src="layer3-code.png" alt="code layer" class="layer3">
  <img src="layer2-brower.png" alt="brower layer" class="layer2">
  <img src="layer1-element.png" alt="element layer" class="layer1">
  <img src="layer0-glass.png" alt="glass layer" class="layer0">
</div>

และใส่ style position: relative ให้กับ class layers ส่วน class img เราจะใส่ position: absolute และจัดตำแหน่งตามต้องการให้เรียบร้อย รูปทุกรูปจะถูกซ้อนกันเสมือนเป็นภาพเดียว จากนั้นใส่คำสั่ง transform-style: preserve-3d; เพื่อจะใช้ประกอบคำสั่งที่ทำให้ภาพเป็น 3 มิติในลำดับต่อไป อ่านเพิ่มเติมเกี่ยวกับ transform-style ได้ที่นี่

.layers {
    position: relative;
    max-width: 300px;
    height: 300px;
    margin: 0 auto;           
}
img {
    position: absolute;
    max-width: 100%;
    transform: translateX(-50%);
    transition: all ease 1600ms;
    transform-style: preserve-3d;
}

เมื่อเราได้ภาพ 2 มิติที่ต้องการแล้ว เราสามารถปรับมุมมองของภาพให้เสมือนเป็นภาพ 3 มิติได้ โดยใช้คำสั่ง transform ใน CSS โดยคำสั่งที่เราจะใช้กันในวันนี้คือ rotate, translate, perspective มาลองดูกันว่าเป็นยังไงบ้าง

Rotate

คำสั่ง rotate จะเป็นการหมุนภาพให้เป็นมุมที่เราต้องการ มีทั้งหมด 3 แบบ คือ rotateX, rotateY, rotateZ วิธีเขียนจะเป็นประมาณนี้

.layer0 {
  transform: rotateX(-20deg);
}

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

ในที่นี่จะลอง rotate ภาพเป็น transform: rotateX(-20deg), rotateY(55deg), rotateZ(0deg) เราสามารถปรับเป็นแบบอื่นก็ได้ตามต้องการ

จะเห็นว่าภาพที่เราหมุนไปนั้นยังไม่ดูเป็นมุม 3 มิติเท่าไหร่ ดูเหมือนเป็นภาพที่ถูกบีบมากกว่า วิธีการแก้ปัญหาคือการนำคำสั่ง perspective เข้ามาช่วย

Perspective

Perspective เป็นการทำให้ภาพนั้นดูมีมิติและสมจริง โดยวิธีการใช้คือ

.layer0 {
  transform: perspective(2500px);
}

ยิ่งเลขน้อยขึ้นแปลว่าสิ่งของนั้นจะอยู่ใกล้ตามากขึ้นเรื่อยๆ จะทำให้เห็นส่วนด้านหน้า(ใกล้ตัว) ใหญ่ และส่วนหลัง(ไกลตัว) เล็ก ถ้าศัพท์สถาปนิกเค้าจะเรียกกันว่า ตีบแรง 555 ดังนั้นเราก็ควรปรับมุม perspective ให้ดูพอดี ไม่แรง ไม่เบาจนเกินไป 😄

เมื่อเราใส่ perspective ให้กับภาพจะเห็นว่า ภาพจะไม่ดูเหมือนโดนบีบแต่จะเป็นภาพที่เป็นเหมือน 3 มิติ มากขึ้น

Translate

Translate จะเป็นการเลื่อนตำแหน่งภาพของเราให้อยู่จุดที่ต้องการ โดยสามารถใช้ได้ทั้งสามแกน คือ translateX, translateY, translateZ ภาพจะขยับไปทางไหนสามารถดูตัวอย่างจากภาพด้านล่างได้

ลองนำ Rotate, Perspective, Translate มาใช้ร่วมกันจะได้ภาพที่ถูกหมุนเป็น 3 มิติ และอยู่ในตำแหน่งที่ต้องการไม่หลุดจอ

โดยเทคนิคก็คือ ควรจัด layer นึงให้ได้มุมและตำแหน่งที่ต้องการก่อน ที่เหลือก็แค่ copy แล้วเปลี่ยนเพียง TranslateZ ให้แต่ละ layer มีความห่างจากกัน ไล่ลำดับไปเรื่อย ๆ จนดูเหมือนเป็นภาพ 3 มิติที่แยกส่วนประกอบออกมา