ง่ายๆคือจะมีสามแกนหลักๆครับ 3D Transformation จะขึ้นอยู่กับแกน(x, y, z) ระบบพิกัดเวกเตอร์ในปริภูมิแบบยุคลิด(Euclidean space)
ภาพต่อไปนี้แสดงตัวอย่างของพิกัดในปริภูมิแบบยุคลิด: ใน CSS
- แกน x หมายถึงแนวนอน (ซ้ายและขวา)
- แกน y หมายถึงแนวตั้ง (บนและล่าง)
- แกน z แกนหมายถึงความลึก (หน้าและหลัง)
เรามาดูตัวอย่างสร้างข้อความให้เป็นสามมิติ (3D)และเคลื่อนได้เมื่อเอาเมาส์ไปวางครับ
โค้ดHTML เราจะสร้าง div elementมาตัวหนึ่งดังนี้
โค้ด: เลือกทั้งหมด
<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>
โค้ด: เลือกทั้งหมด
*{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;
}
ตัวอย่างต่อไปสร้างกล่องสามมิติ ด้วย CSS ดังนี้
โค้ด HTML สั้นๆดังนี้
โค้ด: เลือกทั้งหมด
<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>
โค้ด: เลือกทั้งหมด
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);
}
หวังว่าคงเป็นประโยชน์บ้างน่ะครับ สามารถนำไปประยุกต์ใส่ในเว็บของเราเพื่อความน่าสนใจมากขึ้น
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP