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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Pillow library ฟังก์ชั่น Filters สำหรับการปรับ Filters ของภาพให้มีลูกเล่นมากขึ้น
โดย benzas00123 อ 28 ม.ค. 2020 6:52 pm บอร์ด Python Knowledge
0
49
อ 28 ม.ค. 2020 6:52 pm โดย benzas00123
เรียนรู้การใช้สูตรจาก Excel เพื่อง่ายต่อการคำนวณ
โดย nutchasn อ 28 ม.ค. 2020 6:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
55
อ 28 ม.ค. 2020 6:51 pm โดย nutchasn
Pillow library ฟังก์ชั่น convert ฟังก์ชั่นสำหรับเปลี่ยนโหมดสีของภาพ
โดย benzas00123 อ 28 ม.ค. 2020 6:40 pm บอร์ด Python Knowledge
0
46
อ 28 ม.ค. 2020 6:40 pm โดย benzas00123
ทำความรู้จักโปรแกรม power bi เพื่อใช้ในการวิเคราะห์ข้อมูล
โดย nutchasn อ 28 ม.ค. 2020 4:30 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
42
อ 28 ม.ค. 2020 4:30 pm โดย nutchasn
ทำความรู้เกี่ยวประเภทของสมุดรายวันขั้นต้น เพื่อใช้จดรายการค่าที่เกิดขึ้น
โดย nutchasn อ 28 ม.ค. 2020 3:33 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
26
อ 28 ม.ค. 2020 3:33 pm โดย nutchasn
ความขี้เกียจ
โดย noppadonsk อ 28 ม.ค. 2020 3:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
อ 28 ม.ค. 2020 3:14 pm โดย noppadonsk
เรียนรู้หลักการในการเขียน Flow chart ให้ง่ายต่อการแสดงลำดับการทำงาน
โดย nutchasn อ 28 ม.ค. 2020 2:46 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
53
อ 28 ม.ค. 2020 2:46 pm โดย nutchasn
ขอสอบถามครับ ไม่สามารถแสดงผลรูปภาพบน html ได้
โดย benzas00123 อ 28 ม.ค. 2020 2:28 pm บอร์ด HTML CSS
6
50
อ 28 ม.ค. 2020 3:03 pm โดย benzas00123
ความแตกต่างของการบันทึกบัญชีแบบ Periodic และ Perpetual ให้ง่ายต่อการคำนวณ
โดย nutchasn อ 28 ม.ค. 2020 1:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
31
อ 28 ม.ค. 2020 1:38 pm โดย nutchasn
ทำความรู้จักกับโปรแกรม easy acc โปรแกรมอำนวยความสะดวยต่อการจัดการระบบบัญชี
โดย nutchasn จ 27 ม.ค. 2020 7:12 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
100
จ 27 ม.ค. 2020 7:12 pm โดย nutchasn
อยากทรบวิธีการตรวจสอบความถูกต้องของเลขบัตรประชาชน
โดย Ittichai_chupol จ 27 ม.ค. 2020 6:33 pm บอร์ด Programming - PHP
0
109
จ 27 ม.ค. 2020 6:33 pm โดย Ittichai_chupol
Pillow library ฟังก์ชั่น rotate ใช้สำหรับการหมุนรูปภาพ
โดย benzas00123 จ 27 ม.ค. 2020 6:22 pm บอร์ด Python Knowledge
0
60
จ 27 ม.ค. 2020 6:22 pm โดย benzas00123
Pillow library ความแตกต่างระหว่างฟังก์ชั่น thumbnail และ resize
โดย benzas00123 จ 27 ม.ค. 2020 6:10 pm บอร์ด Python Knowledge
0
42
จ 27 ม.ค. 2020 6:10 pm โดย benzas00123
Pillow library การปรับขนาดรูปภาพด้วยฟังก์ชั่น resize()
โดย benzas00123 จ 27 ม.ค. 2020 5:58 pm บอร์ด Python Knowledge
0
53
จ 27 ม.ค. 2020 5:58 pm โดย benzas00123
วิธีการเดินทางจากบ้าน นครราชสีมา - กรุงเทพฯ
โดย nutchasn จ 27 ม.ค. 2020 3:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
จ 27 ม.ค. 2020 3:40 pm โดย nutchasn
คนเจ้าชู้?
โดย noppadonsk จ 27 ม.ค. 2020 11:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
50
จ 27 ม.ค. 2020 11:16 am โดย noppadonsk
รับติดตั้งระบบ Skype for Business และ Microsoft Teams
โดย Atomseed Suckseed จ 27 ม.ค. 2020 11:05 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
82
จ 27 ม.ค. 2020 11:05 am โดย Atomseed Suckseed
ขอสอบถามเกี่ยวกับ การ send_file zip ครับ
โดย benzas00123 ส 25 ม.ค. 2020 8:44 pm บอร์ด Programming - C/C++ & java & Python
6
96
อ 28 ม.ค. 2020 10:24 am โดย benzas00123
ขอสอบถามเกี่ยวกับวิธีสร้างตัวไว้สำหรับ download หน่อยครับ
โดย benzas00123 ส 25 ม.ค. 2020 5:53 pm บอร์ด Programming - C/C++ & java & Python
2
65
จ 27 ม.ค. 2020 4:00 pm โดย mindphp
pycharm รันภาษาไทยไม่ได้
โดย Anonymous ส 25 ม.ค. 2020 5:29 pm บอร์ด Programming - C/C++ & java & Python
0
38
ส 25 ม.ค. 2020 5:29 pm โดย บุคคลทั่วไป