บทที่ 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
