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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Python GUI (Tkinter) : การกำหนดให้ช่อง entry สามารถกรอกได้แค่ตัวเลขเท่านั้น
โดย benzas00123 พฤ 30 ม.ค. 2020 6:43 pm บอร์ด Python Knowledge
0
51
พฤ 30 ม.ค. 2020 6:43 pm โดย benzas00123
การแยกประเภทในโปรแกรม open erp เพื่อสะดวกในการจัดทำงบการเงิน
โดย nutchasn พฤ 30 ม.ค. 2020 6:25 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
60
พฤ 30 ม.ค. 2020 6:25 pm โดย nutchasn
Python GUI (Tkinter) : การกำหนดนามสกุล File ที่ต้องการจะหาใน Browse file
โดย benzas00123 พฤ 30 ม.ค. 2020 6:04 pm บอร์ด Python Knowledge
0
66
พฤ 30 ม.ค. 2020 6:04 pm โดย benzas00123
วิธีการนำเลขเวอร์ชั่นของ component joomla ออกมาแสดงที่หน้าเว็บไซต์
โดย jamepiyawat พฤ 30 ม.ค. 2020 5:47 pm บอร์ด Joomla Developing Knowledge
0
41
พฤ 30 ม.ค. 2020 5:47 pm โดย jamepiyawat
Python GUI (Tkinter) : การ Browse file แบบ multiple file จากการกดปุ่ม Button
โดย benzas00123 พฤ 30 ม.ค. 2020 5:46 pm บอร์ด Python Knowledge
0
50
พฤ 30 ม.ค. 2020 5:46 pm โดย benzas00123
ทำความรู้การปิดบัญชี เพื่อให้ทราบผลการดำเนินไปประกอบในการตัดสินใจวางแผนธุรกิจ
โดย nutchasn พฤ 30 ม.ค. 2020 5:06 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
51
พฤ 30 ม.ค. 2020 5:06 pm โดย nutchasn
ทำความเข้าใจในการปิดงบบัญชี เพิ่อให้เป็นการปิดงบที่สมบูรณ์
โดย nutchasn พฤ 30 ม.ค. 2020 4:36 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
37
พฤ 30 ม.ค. 2020 4:36 pm โดย nutchasn
อยากทราบวิธีการดึงค่าเลขเวอร์ชั่นในไฟล์ XML ของ components joomla
โดย jamepiyawat พฤ 30 ม.ค. 2020 3:28 pm บอร์ด Joomla Development
3
86
พฤ 30 ม.ค. 2020 5:34 pm โดย tsukasaz
อัพเดทกันหรือยัง! Joomla 3.9.15 ปรับปรุงความปลอดภัยและแก้ไขข้อผิดพลาดต่างๆ
โดย tsukasaz พฤ 30 ม.ค. 2020 11:37 am บอร์ด MindPHP News & Feedback
0
30
พฤ 30 ม.ค. 2020 11:37 am โดย tsukasaz
วิธีการนำข้อความที่ผู้ใช้กรอกให้เข้าไปอยู่ในไฟล์ pdf ด้วยภาษา php
โดย jamepiyawat พ 29 ม.ค. 2020 6:53 pm บอร์ด PHP Knowledge
0
51
พ 29 ม.ค. 2020 6:53 pm โดย jamepiyawat
ติดตั้ง module flaskwebgui ไม่ได้ครับ
โดย benzas00123 พ 29 ม.ค. 2020 6:53 pm บอร์ด Programming - C/C++ & java & Python
2
58
พฤ 30 ม.ค. 2020 11:52 am โดย jirawoot
ความรู้พื้นฐานเกี่ยวกับบัญชีแยกประเภท
โดย nutchasn พ 29 ม.ค. 2020 6:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
32
พ 29 ม.ค. 2020 6:32 pm โดย nutchasn
Pillow library ฟังก์ชั่น Image.new() ฟังก์ชั่นที่ใช้สำหรับการสร้างไฟล์รูปภาพ
โดย benzas00123 พ 29 ม.ค. 2020 6:21 pm บอร์ด Python Knowledge
0
30
พ 29 ม.ค. 2020 6:21 pm โดย benzas00123
ความรู้พื้นฐานเกี่ยวกับงบทดลอง (Taial Balance)
โดย nutchasn พ 29 ม.ค. 2020 6:00 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
34
พ 29 ม.ค. 2020 6:00 pm โดย nutchasn
Pillow library ฟังก์ชั่น ImageDraw() ฟังก์ชั่นสำหรับการเพิ่มตัวอักษรเข้าไปในภาพ
โดย benzas00123 พ 29 ม.ค. 2020 5:52 pm บอร์ด Python Knowledge
0
39
พ 29 ม.ค. 2020 5:52 pm โดย benzas00123
การปรับปรุงค่าใช้จ่ายจ่ายล่วงหน้า (Prepaid expenses)
โดย nutchasn พ 29 ม.ค. 2020 5:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
29
พ 29 ม.ค. 2020 5:29 pm โดย nutchasn
วิธีการเขียน php สำหรับตรวจสอบหมายเลขบัตรประชาชนว่ามีความถูกต้องหรือไม่
โดย Ittichai_chupol พ 29 ม.ค. 2020 5:24 pm บอร์ด PHP Knowledge
0
58
พ 29 ม.ค. 2020 5:24 pm โดย Ittichai_chupol
ทำความรู้จักกับชนิดข้อมูลใน SQL
โดย nutchasn พ 29 ม.ค. 2020 4:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
43
พ 29 ม.ค. 2020 4:38 pm โดย nutchasn
วิธีการปรับปรุงรายได้รับล่วงหน้า (Deferred Income)
โดย nutchasn พ 29 ม.ค. 2020 3:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
34
พ 29 ม.ค. 2020 3:38 pm โดย nutchasn
ผมไม่สามารถใช้ module tkinter ได้ครับ
โดย benzas00123 พ 29 ม.ค. 2020 2:04 pm บอร์ด Programming - C/C++ & java & Python
10
115
พฤ 30 ม.ค. 2020 10:15 am โดย benzas00123