ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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



docman
, บทที่ 7 CSS3 3D Transforms การสร้างรูป 3 มิติ - by บทเรียน CSS,
3 6 1 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
4
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
27
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
19
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
16
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz
อัพเดทหรือยัง? ปรับปรุงเรื่องความปลอดภัย 9 จุด ใน Joomla 3.9.25
โดย tsukasaz พ 03 มี.ค. 2021 12:28 pm บอร์ด MindPHP News & Feedback
0
38
พ 03 มี.ค. 2021 12:28 pm โดย tsukasaz
B - เปิดหน้าเว็บด้วย template เป็น Shaper_megadeal_ii แล้ว Error 404
โดย eange08 พ 03 มี.ค. 2021 12:04 pm บอร์ด เว็บไซต์ Rnyard - Tester
2
7
พ 03 มี.ค. 2021 7:25 pm โดย tsukasaz