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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การทำงานแบบ สืบทอด class บน Python
โดย tatiya อ 14 ส.ค. 2018 7:16 pm บอร์ด Python Knowledge
0
8
อ 14 ส.ค. 2018 7:16 pm โดย tatiya
วิธีลบริ้วรอยด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 7:05 pm บอร์ด Graphic design
0
9
อ 14 ส.ค. 2018 7:05 pm โดย tai14
วิธีสร้างตัวอักษรนูนด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 5:02 pm บอร์ด Graphic design
0
25
อ 14 ส.ค. 2018 5:02 pm โดย tai14
ประโยชน์ของ VPN
โดย anuwat somsakul อ 14 ส.ค. 2018 4:58 pm บอร์ด IOT - Internet of things
0
7
อ 14 ส.ค. 2018 4:58 pm โดย anuwat somsakul
การใช้งาน ตัวแปร golbal บน ภาษา Python
โดย tatiya อ 14 ส.ค. 2018 3:01 pm บอร์ด Python Knowledge
0
3
อ 14 ส.ค. 2018 3:01 pm โดย tatiya
Backup database Mysql
โดย acomscie อ 14 ส.ค. 2018 2:54 pm บอร์ด SQL - Database
0
9
อ 14 ส.ค. 2018 2:54 pm โดย acomscie
วิธีโคลนนิ่งภาพด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 12:09 pm บอร์ด Graphic design
0
13
อ 14 ส.ค. 2018 12:09 pm โดย tai14
ตัวช่วยในการแสดงตัวเลขเคลื่อนไหวด้วย Plugin M Animate Number ใน Joomla
โดย Parichat อ 14 ส.ค. 2018 11:10 am บอร์ด PHP News
0
6
อ 14 ส.ค. 2018 11:10 am โดย Parichat
ขอสูตรคำนวณมือ Nper แบบไม่ติด log ค่ะ
โดย pprn อ 14 ส.ค. 2018 10:39 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
12
อ 14 ส.ค. 2018 10:39 am โดย pprn
งานประจำวันที่ 14 สิงหาคม 2561
โดย anuwat somsakul อ 14 ส.ค. 2018 10:27 am บอร์ด M067 - นายอนุวัฒน์ สมสกุล
1
7
อ 14 ส.ค. 2018 7:15 pm โดย anuwat somsakul
งานประจำวันที่ 14 สิงหาคม 2561
โดย prakon อ 14 ส.ค. 2018 10:20 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
15
อ 14 ส.ค. 2018 10:27 am โดย prakon
งานประจำวันที่ 14 สิงหาคม 2561
โดย Lamduan อ 14 ส.ค. 2018 10:16 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
3
อ 14 ส.ค. 2018 10:16 am โดย Lamduan
งานประจำวันที่ 14 สิงหาม 2561
โดย tatiya อ 14 ส.ค. 2018 10:14 am บอร์ด M065 - ตติยะ นาชัย
1
6
อ 14 ส.ค. 2018 7:29 pm โดย tatiya
งานที่ต้องทำประจำวันที่ 14 สิงหาคม 2561
โดย tai14 อ 14 ส.ค. 2018 10:11 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
9
อ 14 ส.ค. 2018 7:27 pm โดย tai14
งานประจำวันที่ 14 สิงหาคม 2561
โดย pprn อ 14 ส.ค. 2018 10:09 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
8
อ 14 ส.ค. 2018 7:23 pm โดย pprn
วิธีกำหนดให้ หลายๆ IP และ Localhost เชื่อมต่อ มาที่ PostgreSQL Server ได้
โดย mindphp จ 13 ส.ค. 2018 6:00 pm บอร์ด PostgreSQL
1
37
จ 13 ส.ค. 2018 8:19 pm โดย ชินวัฒน์ วาทศิลป์
วิธีเมิร์ชเลเยอร์ทั้งหมดในครั้งเดียว ใน Photoshop
โดย anuwat somsakul ส 11 ส.ค. 2018 6:48 pm บอร์ด CSS Knowledge
0
23
ส 11 ส.ค. 2018 6:48 pm โดย anuwat somsakul
การใช้งาน โมดูล radom ในการสุ่มคำ
โดย tatiya ส 11 ส.ค. 2018 6:41 pm บอร์ด Programming - C/C++ & java & Python
0
20
ส 11 ส.ค. 2018 6:41 pm โดย tatiya
รูปแบบการนำส่งข้อมูลภาษีเงินได้หัก ณ ที่จ่ายยื่นด้วยสื่อบันทึกข้อมูลในระบบคอมพิวเตอร์ หรืออินเทอร์เน็ต
โดย thatsawan ส 11 ส.ค. 2018 4:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
29
ส 11 ส.ค. 2018 4:49 pm โดย thatsawan
B - ฐานเทส User กด Preferences ระบบแจ้งข้อความ error
โดย rinrada ส 11 ส.ค. 2018 2:46 pm บอร์ด Hachanna - Testter
0
6
ส 11 ส.ค. 2018 2:46 pm โดย rinrada