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

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

บทที่ 6 CSS3 2D Transforms ตอน 5
5.การปรับเปลี่ยนรูปแบบ Matrix transform
 matrix : transform: matrix(a, c, d, b, tx, ty); ในคำสั่งนี้จะมีค่าตัวเลขให้กรอกทั้งหมดหกตัว ซึ่งทำให้รูปมีการเปลี่ยนแปลงแตกต่างกัน ตามตัวอย่างดังนี้

<html>
<head>
<style> 
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;
margin: auto auto;}

div#div2
{transform:matrix(1,0,0,1,0,0);
-ms-transform:matrix(1,0,0,1,0,0); /* IE 9 */
-moz-transform:matrix(1,0,0,1,0,0);/* Firefox */
-webkit-transform:matrix(1,0,0,1,0,0); /* Safari and Chrome */
-o-transform:matrix(1,0,0,1,0,0); /* Opera */}

</style>
</head>
<body>

<div>Hello Nerd</div>

<div id="div2">Hello Nerd</div>

</body>
</html>

ผลลัพธ์คือ

คำอธิบาย
   จากการใส่ค่าตัวเลข  transform:matrix(1,0,0,1,0,0); ทำให้ได้รูปที่มีลักษณะเหมือนรูปต้นฉบับ และอยู่ใต้รูปต้นฉบับด้วยแท็ก <div>
หากลองเปลี่ยนตัวเลข รูปภาพที่ได้จะมีลักษณะเปลี่ยนไปตามตัวอย่างด้านล่างนี้

     5.1 ค่าตัวเลขตัวเเรก เป็นการพลิกรูปหน้าไปเป็นหลัง โดยพลิกจากซ้ายเป็นขวา ตามตัวอย่าง

transform:matrix(2,0,0,1,0,0); transform:matrix(0.3,0,0,1,0,0); transform:matrix(-2,0,0,1,0,0);


    5.2 ค่าตัวเลขตัวที่สอง เป็นการปรับรูปให้เฉียง ตามแนวตั้ง ตามตัวอย่าง

transform:matrix(1,2,0,1,0,0); transform:matrix(1,0.3,0,1,0,0); transform:matrix(1,-2,0,1,0,0);


  5.3ค่าตัวเลขตัวที่สาม เป็นการปรับรูปให้เฉียง ตามแนวนอน ตามตัวอย่าง

transform:matrix(1,0,2,1,0,0); transform:matrix(1,0,0.3,1,0,0); transform:matrix(1,0,-2,1,0,0);


5.4 ค่าตัวเลขตัวที่สี่ เป็นการพลิกจากบนเป็น ตามตัวอย่าง

transform:matrix(1,0,0,2,0,0); transform:matrix(1,0,0,0.3,0,0); transform:matrix(1,0,0,-2,0,0);


5.5 ค่าตัวเลขตัวที่ห้า เป็นการเลื่อนรูปภาพไปด้านซ๊าย-ขวา

transform:matrix(1,0,0,1,50,0); transform:matrix(1,0,0,1,0,0); transform:matrix(1,0,0,1,-50,0);


5.6

transform:matrix(1,0,0,1,0,0); transform:matrix(1,0,0,1,0,0); transform:matrix(1,0,0,1,0,0);



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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มีปัญหาเกี่ยวกับการติดต่อ SQL Server 2005
โดย kalasinclub จ 03 เม.ย. 2006 3:37 pm บอร์ด Programming - PHP
8
3616
อ 24 มิ.ย. 2008 1:38 am โดย mindphp
เวบไซต์มีประโยชย์ดีครับผม
โดย siamvip อ 02 เม.ย. 2006 12:58 am บอร์ด Programming - PHP
0
2088
อ 02 เม.ย. 2006 12:58 am โดย siamvip
มีปัญหาเรื่องการแสดงภาษาไทย
โดย Anonymous ส 01 เม.ย. 2006 11:44 pm บอร์ด Programming - PHP
6
3386
อ 25 เม.ย. 2006 5:49 pm โดย บุคคลทั่วไป
กล้องใน yahoo และ msnเปิดไม่ได้ค่ะ
โดย Anonymous พฤ 30 มี.ค. 2006 8:24 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
3455
ศ 31 มี.ค. 2006 12:34 pm โดย icphysics
FireFox 2.0 รุ่น alpha ออกแล้วครับ วันนี้นี่เอง
โดย icphysics อ 21 มี.ค. 2006 11:43 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
3069
อ 09 พฤษภาคม 2006 11:41 am โดย บุคคลทั่วไป
ติดตั้ง php apache Mysql เครื่องมือ
โดย อ 21 มี.ค. 2006 6:32 pm บอร์ด Share Knowledge
11
26535
ส 24 เม.ย. 2010 4:22 pm โดย mindphp
อยากเรียน PHP ครับ
โดย Anonymous จ 13 มี.ค. 2006 9:31 am บอร์ด Programming - PHP
0
2027
จ 13 มี.ค. 2006 9:31 am โดย บุคคลทั่วไป
แนะนำ PHP Extension For JDeveloper
โดย ส 11 มี.ค. 2006 12:18 pm บอร์ด Programming - PHP
1
1778
พฤ 21 ธ.ค. 2017 12:33 am โดย mindphp
function curl ไว้ใช้ทำอะไรครับ
โดย Anonymous ศ 10 มี.ค. 2006 10:18 am บอร์ด Programming - PHP
1
2863
พฤ 01 ม.ค. 1970 7:00 am โดย 4404
แจก ฟรี E-Books PHP สำหรับ...
โดย จ 06 มี.ค. 2006 12:56 am บอร์ด Programming - PHP
1
3066
อ 12 ธ.ค. 2006 2:47 am โดย nambuai
ฟรี โหลดข้อมูล จาก rapidshare
โดย ส 04 มี.ค. 2006 8:10 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
5851
พ 11 ก.ค. 2007 4:31 am โดย author
AJAX มาตรฐานใหม่ web application
โดย Anonymous พ 01 มี.ค. 2006 1:46 pm บอร์ด Programming - PHP
4
4349
อ 09 พฤษภาคม 2006 11:36 am โดย บุคคลทั่วไป
มีปัญหาเรื่อง session ใครรู้ช่วยตอบหบ่อยครับ
โดย Anonymous พ 01 มี.ค. 2006 4:44 am บอร์ด Programming - PHP
2
3576
ศ 12 พฤษภาคม 2006 4:22 am โดย joshino
โค้ด php mysql
โดย Anonymous ศ 24 ก.พ. 2006 8:55 pm บอร์ด Programming - PHP
9
3996
อ 12 ธ.ค. 2006 2:50 am โดย nambuai
โค้ด php
โดย Anonymous ศ 24 ก.พ. 2006 8:27 pm บอร์ด Programming - PHP
5
4773
อ 12 ธ.ค. 2006 2:59 am โดย nambuai
อยากได้ code บ้าง
โดย Anonymous พฤ 23 ก.พ. 2006 9:02 am บอร์ด Programming - PHP
1
2425
พฤ 23 ก.พ. 2006 9:04 am โดย บุคคลทั่วไป
อยากรู้วิธี อัพโหลด เว็บสู่ sever โดยใช้ browser
โดย Anonymous จ 20 ก.พ. 2006 5:27 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
5681
จ 13 มิ.ย. 2011 10:05 am โดย suukmiie
ดูให้หน่อยซิค่าว่าผิดตรงไหน ทำไมไม่griup ตรง $gp ให้ค่ะ
โดย Anonymous อ 14 ก.พ. 2006 6:55 pm บอร์ด Programming - PHP
1
2278
พฤ 01 ม.ค. 1970 7:00 am โดย 4404
madona
โดย Anonymous อ 12 ก.พ. 2006 12:09 pm บอร์ด Programming - PHP
1
2374
พฤ 01 ม.ค. 1970 7:00 am โดย 4404
อยากได้โค๊ตค่ะ
โดย Anonymous อ 07 ก.พ. 2006 11:20 am บอร์ด Programming - PHP
0
1990
อ 07 ก.พ. 2006 11:20 am โดย บุคคลทั่วไป