ให้เรตสมาชิก: 2 / 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



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
[ปัญหา] ดึงข้อมูลเพื่อให้แสดงค่าใน PDF แต่ Error ค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 10:59 am บอร์ด Programming - C/C++ & java & Python
4
25
ศ 15 ธ.ค. 2017 10:59 am โดย Wallapa
ปฏิทินบัญชี ที่รวบรวมวันยื่นภาษีที่ทุกองค์กรต้องยื่น ปี 2018/ ปฏิทิน 2561 พร้อมวันหยุด - โหลดก่อนได้ก่อนอย่ารอช้า!
โดย Before Dong ศ 15 ธ.ค. 2017 10:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ศ 15 ธ.ค. 2017 10:23 am โดย Before Dong
ฝันร้ายของโปรแกรมเมอร์
โดย Before Dong ศ 15 ธ.ค. 2017 9:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
11
ศ 15 ธ.ค. 2017 9:42 am โดย mindphp
[ปัญหา] เขียน selenium เพื่อcheck error แต่โค้ดที่เขียนเกิด error
โดย Panchalee พฤ 14 ธ.ค. 2017 9:27 pm บอร์ด Programming - C/C++ & java & Python
2
18
พฤ 14 ธ.ค. 2017 9:27 pm โดย mindphp
รบกวนขอวิธีคำนวนหาจำนวนตามข้อความครับ
โดย Artayaarray Dear พฤ 14 ธ.ค. 2017 4:41 pm บอร์ด Programming - PHP
1
13
พฤ 14 ธ.ค. 2017 4:41 pm โดย thatsawan
อยากทราบขั้นตอนในการทำ selenium เพื่อเช็ค Error 404
โดย Panchalee พฤ 14 ธ.ค. 2017 3:55 pm บอร์ด Programming - C/C++ & java & Python
1
24
พฤ 14 ธ.ค. 2017 3:55 pm โดย nuattawoot
ม้าลายยุค 4.0
โดย Before Dong พฤ 14 ธ.ค. 2017 9:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
49
พฤ 14 ธ.ค. 2017 9:31 am โดย Before Dong
สร้างไฟล์เอกสารด้วย Reportlab (รีพอร์ตแล็บ)
โดย Wallapa พ 13 ธ.ค. 2017 5:39 pm บอร์ด Python Knowledge
0
22
พ 13 ธ.ค. 2017 5:39 pm โดย Wallapa
magento error แก้ยังไง ช่วยทีค่ะ !!!
โดย tipp3794 พ 13 ธ.ค. 2017 11:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
4
33
พ 13 ธ.ค. 2017 11:24 am โดย Akk Chu
Responsive Web Design Ver.ขนมปัง
โดย Before Dong พ 13 ธ.ค. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
53
พ 13 ธ.ค. 2017 10:19 am โดย Before Dong
การติดตั้ง Library บน Arduino IDE
โดย chayakan อ 12 ธ.ค. 2017 5:34 pm บอร์ด IOT - Internet of things
0
22
อ 12 ธ.ค. 2017 5:34 pm โดย chayakan
การติดตั้งโปรแกรม และการใช้งาน ArduinoIDE
โดย chayakan อ 12 ธ.ค. 2017 4:54 pm บอร์ด IOT - Internet of things
0
18
อ 12 ธ.ค. 2017 4:54 pm โดย chayakan
Arduino คืออะไร ?
โดย chayakan อ 12 ธ.ค. 2017 4:01 pm บอร์ด IOT - Internet of things
0
33
อ 12 ธ.ค. 2017 4:01 pm โดย chayakan
จะดึงข้อมูลจากฐานข้อมูล ให้มาแสดงใน PDF ค่ะ
โดย Wallapa อ 12 ธ.ค. 2017 11:33 am บอร์ด Programming - C/C++ & java & Python
4
74
อ 12 ธ.ค. 2017 11:33 am โดย Wallapa
รวมงานประจำปี 2560
โดย chayakan อ 12 ธ.ค. 2017 10:58 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
2
อ 12 ธ.ค. 2017 10:58 am โดย chayakan
รวมบทความประจำปี 2560
โดย chayakan อ 12 ธ.ค. 2017 10:58 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
1
อ 12 ธ.ค. 2017 10:58 am โดย chayakan
Note
โดย chayakan อ 12 ธ.ค. 2017 10:54 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
2
อ 12 ธ.ค. 2017 10:54 am โดย chayakan
Work's on Hand ชญากาณฑ์ ชายชัย M054
โดย chayakan อ 12 ธ.ค. 2017 10:53 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
24
อ 12 ธ.ค. 2017 10:53 am โดย chayakan
งานประจำวันที่ 12 ธันวาคม 2560
โดย chayakan อ 12 ธ.ค. 2017 10:48 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
1
16
อ 12 ธ.ค. 2017 10:48 am โดย chayakan
ใส่ถุงมือกันไว้ก่อน IT - Programmer อุปกรณ์ ที่ควรใส่ เวลาทำงาน
โดย Before Dong อ 12 ธ.ค. 2017 10:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
31
อ 12 ธ.ค. 2017 10:37 am โดย Before Dong