บทที่ 7 CSS3 3D Transforms
CSS3 3D Transforms คือการสร้างรูป 3 มิติ ใน CSS3 เช่น
1.rotateX() คือการหมุนตามแนวแกน x โดยใช้คำสั่ง transform:rotateX(ใส่ตัวเลขแทนค่ามุมต้องการหมุน); ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}
div#div2
{transform:rotateX(140deg);
-webkit-transform:rotateX(140deg); /* Safari and Chrome */
-moz-transform:rotateX(140deg); /* Firefox */}
</style>
</head>
<body>
<div>Hello Nerd</div>
<div id="div2">Hello Nerd</div>
</body>
</html>ผลลัพธ์คือ
***การใช้คำสั่ง transform:rotateX ยังไม่สามารถสังเกตเห็นความเป็นสามมิติมากนัก
2.rotateY() คือการหมุนตามแกน y ด้วยคำสั่ง transform:rotateY(ใส่ตัวเลขแทนค่ามุมที่ต้องการหมุน); ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}
div#div2
{transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */}
</style>
</head>
<body>
<div>Hello Nerd</div>
<div id="div2">Hello Nerd</div>
</body>
</html>ผลลัพธ์คือ
***การใช้คำสั่ง transform:rotateY ยังไม่สามารถสังเกตเห็นความเป็นสามมิติมากนัก
3.perspective() rotateX() คือการสร้างภาพ perspective ตามแนวแกน x ด้วยคำสั่ง perspective(ค่ามุม perspective) rotateX(ตัวเลขแทนค่ามุมต้องการหมุน);
ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}
div#div2
{transform:perspective(100px) rotateX(50deg);
-webkit-transform:perspective(100px) rotateX(50deg); /* Safari and Chrome */
-moz-transform:perspective(40px) rotateX(50deg); /* Firefox */}
</style>
</head>
<body>
<center>
<div>Hello Nerd</div>
<div id="div2">Hello Nerd</div>
</center>
</body>
</html>ผลลัพธ์คือ
4.perspective() rotateY() คือการสร้างภาพ perspective ตามแนวแกน Y ด้วยคำสั่ง perspective(ค่ามุม perspective) rotateY(ตัวเลขแทนค่ามุมต้องการหมุน);
ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}
div#div2
{transform:perspective(60px) rotateY(50deg);
-webkit-transform:perspective(60px) rotateY(50deg); /* Safari and Chrome */
-moz-transform:perspective(60px) rotateY(50deg); /* Firefox */}
</style>
</head>
<body>
<center>
<div>Hello Nerd</div>
<div id="div2">Hello Nerd</div>
</center>
</body>
</html>ผลลัพธ์คือ
ข้อมูลอ้างอิง
http://www.htmlgoodies.com
http://www.w3schools.com
