ให้เรตสมาชิก: 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
อยากรู้วิธีใส่ Google Structure ใน Joomla ว่าใส่ตำแหน่งไหนและแก้ตรงไหนบ้างครับ
โดย Before Dong พฤ 21 ก.ย. 2017 2:20 pm บอร์ด Joomla Development
0
4
พฤ 21 ก.ย. 2017 2:20 pm โดย Before Dong
เมื่อ "ลูกค้า" บอกความต้องการของระบบ
โดย Before Dong พฤ 21 ก.ย. 2017 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
พฤ 21 ก.ย. 2017 10:29 am โดย Before Dong
oracle Sql loader
โดย jataz2 พ 20 ก.ย. 2017 5:13 pm บอร์ด SQL - Database
0
6
พ 20 ก.ย. 2017 5:13 pm โดย jataz2
ประกันสังคมพร้อมก้าวสู่ Digital SSO ไม่ต้องพกบัตรรับรองสิทธิ ตั้งแต่วันที่ 1 ม.ค. 61 เป็นต้นไป
โดย thatsawan พ 20 ก.ย. 2017 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
พ 20 ก.ย. 2017 11:03 am โดย thatsawan
เมื่อคุณประชุมทีมแล้ว ทีมไม่เข้าใจที่คุณพูด
โดย Before Dong พ 20 ก.ย. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 20 ก.ย. 2017 10:19 am โดย Before Dong
Joomla 3.8 มาแล้ว
โดย mindphp อ 19 ก.ย. 2017 9:14 pm บอร์ด PHP News
0
12
อ 19 ก.ย. 2017 9:14 pm โดย mindphp
สถานะสถานพยาบาลที่เข้าร่วมประกันสังคม 2560 อัพเดทล่าสุด
โดย thatsawan อ 19 ก.ย. 2017 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 19 ก.ย. 2017 11:32 am โดย thatsawan
ทุกปัญหาใหญ่สำหรับ "User" เสมอ!!
โดย Before Dong อ 19 ก.ย. 2017 10:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 19 ก.ย. 2017 10:16 am โดย Before Dong
เจอ Process ไม่พึงประสงค์ ผังและรัน ภายใต้ /tmp ป้องกันไม่ใช้ รันไฟล์ใน tmp
โดย mindphp อ 19 ก.ย. 2017 7:52 am บอร์ด Linux - Web Server
0
11
อ 19 ก.ย. 2017 7:52 am โดย mindphp
ใครใช้ CCleaner เวอร์ชั่นเก่า อัพเกรดด่วน ให้ใหม่กว่า เวอร์ชัน 5.33
โดย mindphp อ 19 ก.ย. 2017 5:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
15
อ 19 ก.ย. 2017 5:29 am โดย mindphp
facebook มันมันบังคับให้ตั้งชื่อใหม่ ให้เป็นชื่อจริงๆ
โดย บุคคลทั่วไป อ 19 ก.ย. 2017 5:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
อ 19 ก.ย. 2017 5:18 am โดย บุคคลทั่วไป
สอบถามการประยุกต์ใช้คำสั่ง rect()
โดย Ik Kat จ 18 ก.ย. 2017 6:00 pm บอร์ด JavaScript & Jquery Ajax
0
17
จ 18 ก.ย. 2017 6:00 pm โดย Ik Kat
วิธีแก้ปัญหา Can't create/write to file '/tmp/#sql_6182_0.MAI' (Errcode: 2)
โดย mindphp จ 18 ก.ย. 2017 3:40 pm บอร์ด Linux - Web Server
0
11
จ 18 ก.ย. 2017 3:40 pm โดย mindphp
ทำ pop up ให้ login wordpress
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 1:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
21
จ 18 ก.ย. 2017 1:26 pm โดย บุคคลทั่วไป
ธุรกิจกระเป๋าเงินอิเล็กทรอนิกส์ หรือ e-Money คืออะไร
โดย M029 จ 18 ก.ย. 2017 11:46 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
17
จ 18 ก.ย. 2017 11:46 am โดย M029
สร้างฟอร์มรับข้อมูล แล้วส่งไปเก็บที่ phpmyadmin
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 11:31 am บอร์ด Programming - PHP
0
22
จ 18 ก.ย. 2017 11:31 am โดย บุคคลทั่วไป
อยากจะเช็คเงื่อนไขไม่ให้เกิด error แบบนี้ EntityRef: expecting ';', ทำยังไงได้บ้างค่ะ
โดย thatsawan จ 18 ก.ย. 2017 11:28 am บอร์ด Programming - C/C++ & java & Python
4
32
จ 18 ก.ย. 2017 11:28 am โดย mindphp
ขั้นตอนที่ SA คิด ขั้นตอนที่ Programmer ทำ
โดย Before Dong จ 18 ก.ย. 2017 10:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
36
จ 18 ก.ย. 2017 10:25 am โดย P'Eak
selenium python คำสั่ง ใช้สำหรับ การค้นหา Elements บนหน้าเว็บ
โดย mindphp อ 17 ก.ย. 2017 4:53 am บอร์ด Python Knowledge
0
18
อ 17 ก.ย. 2017 4:53 am โดย mindphp
ตั้งค่า MX ของ mailgun เสริมจากบทความ
โดย mindphp ส 16 ก.ย. 2017 9:17 pm บอร์ด Linux - Web Server
1
17
ส 16 ก.ย. 2017 9:17 pm โดย P'Eak