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

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

บทที่ 8 CSS3 Transitions
   CSS3 TRansition ในที่นี่คือการใส่เอฟเฟค ต่างๆให้กับเว็บไซต์  โดย Flash animations หรือ JavaScript
***ไม่สามารถใช้กับ Internet Explorer ได้
   ตัวอย่างเช่น
    1.การเปลี่ยนรูปร่างวัตถุ แบบทิศทางเดียว  ซึ่งใช้กับแท็ก <div>  เมื่อใช้เมาส์ชี้ที่วัตถุจะมีการเปลี่ยนรูปร่าง เช่น

 <html>
<head>
<style> 

div
{width:100px;
height:100px;
background:pink;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */}

div:hover
{width:400px;}

</style>
</head>
<body>

<p>This example does not work in Internet Explorer. </p>

<div></div>

</body>
</html>

ผลลัพธ์คือ

ดูตัวอย่างที่ 1 คลิกที่นี่


คำอธิบาย

 {width: ความกว้างของสี่เหลี่ยม ;
height:ความสูงของสี่เหลี่ยม;
background:สีของสี่เหลี่ยม;
transition:width ความเร็วในการเปลี่ยนรูปร่างของสี่เหลี่ยม;

***ในตัวอย่างเป็นการเปลี่ยนรูปร่างในแนวนอน ใช้คำสั่ง  transition:width และ div:hover {width:ความกว้างหลังวัตถุเปลี่ยนรูปร่างแล้ว}
  แต่หากต้องการให้เปลี่ยนรูปร่างในตั้งให้ใช้คำสั่ง transition:height และ div:hover {height: ความยาวหลังวัตถุเปลี่ยนรูปร่างแล้ว}

2.การเปลี่ยนรูปร่างวัตถุ แบบสองทิศทาง  ซึ่งใช้กับแท็ก <div> เมื่อใช้เมาส์ชี้ที่วัตถุจะมีการเปลี่ยนรูปร่างเช่น

<html>
<head>
<style> 
div
{width:100px;
height:100px;
background:pink;
transition:width 3s, height 3s;
-moz-transition:width 3s, height 3s, -moz-transform 3s; /* Firefox 4 */
-webkit-transition:width 3s, height 3s, -webkit-transform 3s; /* Safari and Chrome */
-o-transition:width 3s, height 3s, -o-transform 3s; /* Opera */}

div:hover
{width:50px;
height:50px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */}

</style>
</head>
<body> 
<p>This example does not work in Internet Explorer.</p>

<div><center>Hello Nerd</center></div>
</body>
</html>

ผลลัพธืคือ

ดูตัวอย่างที่ 2 คลิกที่นี่

คำอธิบาย
div
{width:
ความกว้างของสี่เหลี่ยม;
height:
ความสูงของสี่เหลี่ยม;
background:
สีของสี่เหลี่ยม;
transition:width
ความเร็วในการเปลี่ยนรูปร่างของสี่เหลี่ยม(กว้าง), height ความเร็วในการเปลี่ยนรูปร่างของสี่เหลี่ยม(ยาว);

div:hover
{width:ความกว้างหลังวัตถุเปลี่ยนรูปร่างแล้ว;
height:ความยาวหลังวัตถุเปลี่ยนรูปร่างแล้ว;

***ความกว้างและความยาวนี้ถ้าใส่เป็นศูนย์ รูปสี่เหลี่ยมจะค่อยๆเล็กลงจนหายไปในที่สุด

transform:rotate(วัตถุจะหมุนไปกี่องศา เช่น ในตัวอย่างด้านบนวัตถุหมุนไป 180 องศา);


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ฺB - รหัสสินค้าเรียงลำดับไม่ถูกต้อง [2018-06][005]
โดย Rujikon จ 18 มิ.ย. 2018 5:38 pm บอร์ด Hachanna - Testter
0
1
จ 18 มิ.ย. 2018 5:38 pm โดย Rujikon
R - ลบคำว่า Access this document directly in OpenERP ตอนที่ส่งเมลจากระบบหาลูกค้า @M017
โดย mindphp จ 18 มิ.ย. 2018 5:34 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 18 มิ.ย. 2018 5:34 pm โดย mindphp
Review เครื่องพิมพ์แบบ DoT Matrix Printer (ดอตแมทริกซ์)
โดย AePongsak จ 18 มิ.ย. 2018 5:15 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
จ 18 มิ.ย. 2018 5:15 pm โดย AePongsak
B - หน้ารายการสินค้าโหลด javascript มา 90 ไฟล์
โดย tsukasaz จ 18 มิ.ย. 2018 3:06 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
4
จ 18 มิ.ย. 2018 3:06 pm โดย tsukasaz
รวมกระทู้แจ้ง Bug ของ Extension joomla เวอร์ชัน 4.0 ที่ติดตั้งบน localhost
โดย Parichat จ 18 มิ.ย. 2018 3:04 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
6
จ 18 มิ.ย. 2018 3:04 pm โดย Parichat
B - mod_md_recent สามารถติดตั้งได้ ตั้งค่าได้แต่ไม่สามารถแสดงในหน้าเว็บได้
โดย Parichat จ 18 มิ.ย. 2018 10:46 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
3
จ 18 มิ.ย. 2018 10:46 am โดย Parichat
งานประจำวันที่ 18 มิถุนายน 2561
โดย Rujikon จ 18 มิ.ย. 2018 10:21 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
6
จ 18 มิ.ย. 2018 12:37 pm โดย AePongsak
งานประจำวันที่ 18 มิถุนายน 2561
โดย taemmynatchapon จ 18 มิ.ย. 2018 10:10 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
2
จ 18 มิ.ย. 2018 10:10 am โดย taemmynatchapon
งานประจำวันที่ 18 มิถุนายน 2561
โดย Parichat จ 18 มิ.ย. 2018 9:46 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
จ 18 มิ.ย. 2018 9:46 am โดย Parichat
B - demo Print loading list ภาษาไทยไม่แสดง
โดย mindphp อ 17 มิ.ย. 2018 12:09 am บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
1
2
อ 17 มิ.ย. 2018 12:28 am โดย mindphp
B - มีโมดูลเกินใน demo
โดย mindphp ส 16 มิ.ย. 2018 11:53 pm บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
0
1
ส 16 มิ.ย. 2018 11:53 pm โดย mindphp
Q - วิธีเรียกตัวแปรมาใช้ในไฟล์ php ที่แสดงในหน้าเว็บใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 6:58 pm บอร์ด Joomla Dev
57
126
จ 18 มิ.ย. 2018 5:25 pm โดย Parichat
B - com_mcharts สามารถติดตั้งได้แต่ไม่สามารถเข้าหน้าตั่งค่าได้
โดย Parichat ส 16 มิ.ย. 2018 5:12 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
ส 16 มิ.ย. 2018 5:12 pm โดย Parichat
B - com_MJUpgrade ไม่สามารถติดตั้งได้
โดย Parichat ส 16 มิ.ย. 2018 4:48 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
ส 16 มิ.ย. 2018 4:48 pm โดย Parichat
B - com_M2OpenERP Migration สามารถติดตั้งได้แต่ไม่สามารถใช้งานได้
โดย Parichat ส 16 มิ.ย. 2018 4:31 pm บอร์ด M2OpenERP
0
5
ส 16 มิ.ย. 2018 4:31 pm โดย Parichat
controller เรียกใช้ function ใน model ใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 3:38 pm บอร์ด Joomla Developing Knowledge
0
39
ส 16 มิ.ย. 2018 3:38 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย Rujikon ส 16 มิ.ย. 2018 9:40 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
7
ส 16 มิ.ย. 2018 7:06 pm โดย Rujikon
งานประจำวันที่ 16 มิถุนายน 2561
โดย Parichat ส 16 มิ.ย. 2018 9:35 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
3
ส 16 มิ.ย. 2018 7:09 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย wilawan ส 16 มิ.ย. 2018 8:33 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
10
ส 16 มิ.ย. 2018 7:02 pm โดย thatsawan
upload file ไม่เข้าค่ะผิดตรงไหนค่ะ รบกวนแนะนำหน่อยค่ะ _/|\_
โดย supattra_su ศ 15 มิ.ย. 2018 6:08 pm บอร์ด Programming - PHP
1
63
ส 16 มิ.ย. 2018 1:03 am โดย mindphp