CSS Tips: 3D Transforms สร้างรูป 3 มิติ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

CSS Tips: 3D Transforms สร้างรูป 3 มิติ

Post by abdkode » 04/04/2019 5:49 pm

ก่อนอื่นเราทำความเข้าใจระบบพิกัด(Coordinate system)ก่อน ซึ่งถ้าใครทำงานด้าน 3d อาจจะรู้จักกันดีหรือหลายคนอาจจะเคยในวิชาคณิตศาสตร์ ระบบพิกัด (Coordinate system) หมายถึงระบบที่สร้างขึ้นสําหรับใช้อ้างอิงในการกําหนดตําแหน่ง หรือบอกตําแหน่ง บนแกนอ้างอิง x-y-z และใช้สําหรับอธิบายรายละเอียดทางเวกเตอร้์
ง่ายๆคือจะมีสามแกนหลักๆครับ 3D Transformation จะขึ้นอยู่กับแกน(x, y, z) ระบบพิกัดเวกเตอร์ในปริภูมิแบบยุคลิด(Euclidean space)
ภาพต่อไปนี้แสดงตัวอย่างของพิกัดในปริภูมิแบบยุคลิด:
Euclidean space.jpg
Euclidean space.jpg (8.59 KiB) Viewed 585 times
ใน CSS
  • แกน x หมายถึงแนวนอน (ซ้ายและขวา)
  • แกน y หมายถึงแนวตั้ง (บนและล่าง)
  • แกน z แกนหมายถึงความลึก (หน้าและหลัง)
สามารถศึกษาเรื่อง CSS 3D ลิงค์นี้
เรามาดูตัวอย่างสร้างข้อความให้เป็นสามมิติ (3D)และเคลื่อนได้เมื่อเอาเมาส์ไปวางครับ

โค้ดHTML เราจะสร้าง div elementมาตัวหนึ่งดังนี้

Code: Select all

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>
ต่อไป คือการกำหนด CSS style

Code: Select all

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}
ซึ่งผลลัพธ์ที่ได้ดังนี้
3d text.jpg
3d text.jpg (11.79 KiB) Viewed 585 times
3d text2.jpg
3d text2.jpg (11.56 KiB) Viewed 585 times
สามารถคลิกไปดูตัวอย่างได้ตามลิงค์ครับ https://codepen.io/kodenamzz/pen/zXrMZJ

ตัวอย่างต่อไปสร้างกล่องสามมิติ ด้วย CSS ดังนี้
โค้ด HTML สั้นๆดังนี้

Code: Select all

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>
ส่วน CSS โค้ดตามนี้เลยครับ ยาวหน่อย

Code: Select all

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}
ผลลัพธ์ที่ดังรูปภาพด้านล่างนี้
3d cube.jpg
3d cube.jpg (4.2 KiB) Viewed 585 times
คลิกที่เพื่อผลลัพธํเต็มๆ
หวังว่าคงเป็นประโยชน์บ้างน่ะครับ สามารถนำไปประยุกต์ใส่ในเว็บของเราเพื่อความน่าสนใจมากขึ้น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests