ก่อนอื่นเราทำความเข้าใจระบบพิกัด(Coordinate system)ก่อน ซึ่งถ้าใครทำงานด้าน 3d อาจจะรู้จักกันดีหรือหลายคนอาจจะเคยในวิชาคณิตศาสตร์ ระบบพิกัด (Coordinate system) หมายถึงระบบที่สร้างขึ้นสําหรับใช้อ้างอิงในการกําหนดตําแหน่ง หรือบอกตําแหน่ง บนแกนอ้างอิง x-y-z และใช้สําหรับอธิบายรายละเอียดทางเวกเตอร้์
ง่ายๆคือจะมีสามแกนหลักๆครับ 3D Transformation จะขึ้นอยู่กับแกน(x, y, z) ระบบพิกัดเวกเตอร์ในปริภูมิแบบยุคลิด(Euclidean space)
ภาพต่อไปนี้แสดงตัวอย่างของพิกัดในปริภูมิแบบยุคลิด:
- Euclidean space.jpg (8.59 KiB) Viewed 1916 times
ใน CSS
- แกน x หมายถึงแนวนอน (ซ้ายและขวา)
- แกน y หมายถึงแนวตั้ง (บนและล่าง)
- แกน z แกนหมายถึงความลึก (หน้าและหลัง)
สามารถศึกษาเรื่อง
CSS 3D ลิงค์นี้
เรามาดูตัวอย่างสร้างข้อความให้เป็นสามมิติ (3D)และเคลื่อนได้เมื่อเอาเมาส์ไปวางครับ
โค้ดHTML เราจะสร้าง div elementมาตัวหนึ่งดังนี้
โค้ด: เลือกทั้งหมด
<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>
ต่อไป คือการกำหนด CSS style
โค้ด: เลือกทั้งหมด
*{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 (11.79 KiB) Viewed 1916 times
- 3d text2.jpg (11.56 KiB) Viewed 1916 times
สามารถคลิกไปดูตัวอย่างได้ตามลิงค์ครับ
https://codepen.io/kodenamzz/pen/zXrMZJ
ตัวอย่างต่อไปสร้างกล่องสามมิติ ด้วย CSS ดังนี้
โค้ด HTML สั้นๆดังนี้
โค้ด: เลือกทั้งหมด
<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>
ส่วน CSS โค้ดตามนี้เลยครับ ยาวหน่อย
โค้ด: เลือกทั้งหมด
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 (4.2 KiB) Viewed 1916 times
คลิกที่เพื่อผลลัพธํเต็มๆ
หวังว่าคงเป็นประโยชน์บ้างน่ะครับ สามารถนำไปประยุกต์ใส่ในเว็บของเราเพื่อความน่าสนใจมากขึ้น
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-
สอนการใช้งาน HTML & CSS
-
ถามตอบ HTML CSS
-
บทเรียน CSS
-
บทเรียน HTML5
-
แลกเปลี่ยนความรู้ PHP
ก่อนอื่นเราทำความเข้าใจระบบพิกัด(Coordinate system)ก่อน ซึ่งถ้าใครทำงานด้าน 3d อาจจะรู้จักกันดีหรือหลายคนอาจจะเคยในวิชาคณิตศาสตร์ ระบบพิกัด (Coordinate system) หมายถึงระบบที่สร้างขึ้นสําหรับใช้อ้างอิงในการกําหนดตําแหน่ง หรือบอกตําแหน่ง บนแกนอ้างอิง x-y-z และใช้สําหรับอธิบายรายละเอียดทางเวกเตอร้์
ง่ายๆคือจะมีสามแกนหลักๆครับ 3D Transformation จะขึ้นอยู่กับแกน(x, y, z) ระบบพิกัดเวกเตอร์ในปริภูมิแบบยุคลิด(Euclidean space)
ภาพต่อไปนี้แสดงตัวอย่างของพิกัดในปริภูมิแบบยุคลิด:
[attachment=3]Euclidean space.jpg[/attachment]
[b]ใน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url][/b]
[list][*]แกน x หมายถึงแนวนอน (ซ้ายและขวา)
[*]แกน y หมายถึงแนวตั้ง (บนและล่าง)
[*]แกน z แกนหมายถึงความลึก (หน้าและหลัง)[/list]
สามารถศึกษาเรื่อง [url=https://mindphp.com/vdo-tutorial-css3/3809-css3-tutorial-07-3d-transforms.html]CSS 3D ลิงค์นี้[/url]
เรามาดูตัวอย่างสร้างข้อความให้เป็นสามมิติ (3D)และเคลื่อนได้เมื่อเอาเมาส์ไปวางครับ
[b]โค้ด[url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เราจะสร้าง div [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url]มาตัวหนึ่งดังนี้[/b]
[code]<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>[/code]
ต่อไป คือการกำหนด CSS style
[code]*{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;
}[/code]
[b]ซึ่งผลลัพธ์ที่ได้ดังนี้[/b]
[attachment=1]3d text.jpg[/attachment]
[attachment=2]3d text2.jpg[/attachment]
สามารถคลิกไปดูตัวอย่างได้ตามลิงค์ครับ [url]https://codepen.io/kodenamzz/pen/zXrMZJ[/url]
ตัวอย่างต่อไปสร้างกล่องสามมิติ ด้วย CSS ดังนี้
[b]โค้ด HTML สั้นๆดังนี้[/b]
[code]<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>[/code]
[b]ส่วน CSS โค้ดตามนี้เลยครับ ยาวหน่อย[/b]
[code]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);
}[/code]
[b]ผลลัพธ์ที่ดังรูปภาพด้านล่างนี้[/b]
[attachment=0]3d cube.jpg[/attachment]
[url=https://codepen.io/web-tiki/pen/NNwqBa]คลิกที่เพื่อผลลัพธํเต็มๆ[/url]
หวังว่าคงเป็นประโยชน์บ้างน่ะครับ สามารถนำไปประยุกต์ใส่ในเว็บของเราเพื่อความน่าสนใจมากขึ้น
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]