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



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการนำข้อมูลคำอธิบายภาพออก ในโพสต์ของ php
โดย Ittichai_chupol พ 11 ธ.ค. 2019 7:03 pm บอร์ด PHP Knowledge
0
2
พ 11 ธ.ค. 2019 7:03 pm โดย Ittichai_chupol
โปรแกรมคำนวณเพซ
โดย prmindphp พ 11 ธ.ค. 2019 6:50 pm บอร์ด MindPHP News & Feedback
0
6
พ 11 ธ.ค. 2019 6:50 pm โดย prmindphp
ArrayList Java กับการหาค่าที่มากที่สุดแล้วลบออก
โดย Grammanano พ 11 ธ.ค. 2019 6:38 pm บอร์ด Share Knowledge
0
9
พ 11 ธ.ค. 2019 6:38 pm โดย Grammanano
การเขียน switch case ในภาษา C
โดย Grammanano พ 11 ธ.ค. 2019 5:52 pm บอร์ด Share Knowledge
0
8
พ 11 ธ.ค. 2019 5:52 pm โดย Grammanano
VDO - Introducing to Pace Calculator
โดย numtan5839 พ 11 ธ.ค. 2019 5:38 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
8
พ 11 ธ.ค. 2019 5:47 pm โดย numtan5839
การลบข้อมูลจาก ArrayList ภาษา Java
โดย Grammanano พ 11 ธ.ค. 2019 5:32 pm บอร์ด Share Knowledge
0
10
พ 11 ธ.ค. 2019 5:32 pm โดย Grammanano
วิธีแปลงไฟล์ PDF เป็นไฟล์ Word ทางเว็ปไซต์
โดย noppadonsk พ 11 ธ.ค. 2019 4:24 pm บอร์ด Share Knowledge
0
5
พ 11 ธ.ค. 2019 4:24 pm โดย noppadonsk
วิธีใช้ text shortcut ใน Google Docs สร้างคำที่พิมพ์บ่อยให้พิมพ์ได้เร็วขึ้น
โดย noppadonsk พ 11 ธ.ค. 2019 4:02 pm บอร์ด Share Knowledge
0
5
พ 11 ธ.ค. 2019 4:02 pm โดย noppadonsk
รู้รึยัง Google Search ค้นหาเนื้อหาในวีดีโอได้แล้ว
โดย noppadonsk พ 11 ธ.ค. 2019 3:47 pm บอร์ด Share Knowledge
0
6
พ 11 ธ.ค. 2019 3:47 pm โดย noppadonsk
10 อันดับรถยนต์วินเทจ ที่ใครเห็นก็ต้องมอง
โดย Meygrand พ 11 ธ.ค. 2019 3:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พ 11 ธ.ค. 2019 3:04 pm โดย Meygrand
อยากทราบวิธีการ override ไฟล์ bookmark มาใช้งานใน Extension ของ phpbb
โดย Ittichai_chupol พ 11 ธ.ค. 2019 11:00 am บอร์ด Programming - PHP
0
8
พ 11 ธ.ค. 2019 11:00 am โดย Ittichai_chupol
งานประจำวันที่ 11 ธันวาคม 2562
โดย noppadonsk พ 11 ธ.ค. 2019 10:05 am บอร์ด MT36 - นายนพดล สุชญากูล
10
40
พ 11 ธ.ค. 2019 7:00 pm โดย noppadonsk
งานประจำวันที่ 11 ธันวาคม 2562
โดย Grammanano พ 11 ธ.ค. 2019 10:02 am บอร์ด M098 - อนงค์นาท ไฝขาว
1
8
พ 11 ธ.ค. 2019 6:59 pm โดย Grammanano
งานประจำวันที่ 11 ธันวาคม 2562
โดย numtan5839 พ 11 ธ.ค. 2019 9:52 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
15
พ 11 ธ.ค. 2019 7:23 pm โดย numtan5839
R - Rotate back up file
โดย Grammanano จ 09 ธ.ค. 2019 8:20 pm บอร์ด M098 - อนงค์นาท ไฝขาว
1
7
จ 09 ธ.ค. 2019 8:24 pm โดย mindphp
การดึงข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 7:42 pm บอร์ด Share Knowledge
0
13
จ 09 ธ.ค. 2019 7:42 pm โดย Grammanano
ฺB - ไม่สามารถ cancel ใบกำกับภาษีที่สร้างผ่าน withholding tax โดยตรงได้
โดย nnamfon.26 จ 09 ธ.ค. 2019 7:27 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
จ 09 ธ.ค. 2019 7:27 pm โดย nnamfon.26
การเพิ่มข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 6:19 pm บอร์ด Share Knowledge
0
10
จ 09 ธ.ค. 2019 6:19 pm โดย Grammanano
การทำงานแบบ Multitasking เหมาะกับใคร - การทำหลาย ๆ อย่างพร้อมกัน
โดย noppadonsk จ 09 ธ.ค. 2019 6:06 pm บอร์ด Share Knowledge
0
14
จ 09 ธ.ค. 2019 6:06 pm โดย noppadonsk
บทเรียนสำหรับนักออกแบบมือใหม่
โดย noppadonsk จ 09 ธ.ค. 2019 5:48 pm บอร์ด Share Knowledge
0
18
จ 09 ธ.ค. 2019 5:48 pm โดย noppadonsk