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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - ไม่สามารถบันทึกรูปภาพที่แคปบนหน้าจอได้ ในโปรแกรม snagit
โดย nnamfon.26 ศ 08 พ.ย. 2019 11:26 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
4
30
จ 11 พ.ย. 2019 3:42 pm โดย nnamfon.26
ต้องการเลือก select tag แล้วส่งค่ากลับมาแล้วแต่ไม่รู้จะนำมาใช้ยังไงครับ
โดย bankjittapol ศ 08 พ.ย. 2019 11:24 am บอร์ด JavaScript & Jquery Ajax
4
38
ศ 08 พ.ย. 2019 3:28 pm โดย bankjittapol
อยากทราบวิธีการที่จะแนบไฟล์ใน ข้อความส่วนตัว
โดย Ittichai_chupol ศ 08 พ.ย. 2019 11:09 am บอร์ด Programming - PHP
3
30
ศ 08 พ.ย. 2019 2:55 pm โดย thatsawan
ไม่มีรหัสไปรษณี 30005 ทำให้อัพเดต ไปรษณีย์ เดอะมอลล์นครราชสีมา แล้วไม่ขึ้นครับ
โดย jamepiyawat ศ 08 พ.ย. 2019 9:53 am บอร์ด Odoojob.com - Tester
3
10
ศ 08 พ.ย. 2019 12:30 pm โดย mindphp
งานประจำวันที่ 8 พฤศจิกายน 2562
โดย numtan5839 ศ 08 พ.ย. 2019 9:21 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
40
ศ 08 พ.ย. 2019 6:27 pm โดย numtan5839
วิธีการเพิ่ม part way ให้แสดงใน phpbb
โดย Ittichai_chupol พฤ 07 พ.ย. 2019 5:46 pm บอร์ด PHP Knowledge
0
31
พฤ 07 พ.ย. 2019 5:46 pm โดย Ittichai_chupol
VDO - โปรแกรมคำนวณอัตราแลกเปลี่ยนสกุลเงิน
โดย numtan5839 พฤ 07 พ.ย. 2019 4:05 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
19
111
อ 12 พ.ย. 2019 6:41 pm โดย numtan5839
VDO - โปรแกรมตรวจสอบหมายเลขพัสดุ
โดย numtan5839 พฤ 07 พ.ย. 2019 3:57 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
13
76
อ 12 พ.ย. 2019 6:54 pm โดย numtan5839
เท็มเพลต megadeal เมือเปลี่ยนเป็นภาษาไทยแล้วหน้า Home ก็เปลี่ยนไป ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 3:33 pm บอร์ด Joomla Development
2
28
ศ 08 พ.ย. 2019 12:44 pm โดย mindphp
VDO - การใช้โปรแกรมคำนวณสแควรูท
โดย numtan5839 พฤ 07 พ.ย. 2019 3:18 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
7
63
อ 12 พ.ย. 2019 7:01 pm โดย numtan5839
โมดูล JE Quick Contact ขึ้นว่า Warning ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 3:16 pm บอร์ด Joomla Development
5
47
ศ 08 พ.ย. 2019 5:29 pm โดย mindphp
VDO - การใช้โปรแกรมคำนวน ค่าเฉลี่ย, ค่าแปรปรวน, ค่าเบี่ยงเบนมาตราฐาน
โดย numtan5839 พฤ 07 พ.ย. 2019 2:54 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
9
101
อ 12 พ.ย. 2019 7:06 pm โดย numtan5839
ขั้นตอนการอัดวิดิโอ
โดย numtan5839 พฤ 07 พ.ย. 2019 2:31 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
10
พฤ 07 พ.ย. 2019 2:47 pm โดย thatsawan
วิธีการเพิ่มค่าลดค่า array แต่ละค่าใน php
โดย jamepiyawat พฤ 07 พ.ย. 2019 2:11 pm บอร์ด PHP Knowledge
0
18
พฤ 07 พ.ย. 2019 2:11 pm โดย jamepiyawat
วิธีการใช้ curl เพื่อขอข้อมูลเว็บไซต์
โดย jamepiyawat พฤ 07 พ.ย. 2019 1:46 pm บอร์ด PHP Knowledge
0
21
พฤ 07 พ.ย. 2019 1:46 pm โดย jamepiyawat
Joomla 3.9.13 พร้อมให้อัปเดตแล้ว ปรับปรุงความปลอดภัยและระบบให้ดีขึ้น
โดย tsukasaz พฤ 07 พ.ย. 2019 1:14 pm บอร์ด MindPHP News
0
14
พฤ 07 พ.ย. 2019 1:14 pm โดย tsukasaz
VDO - การแนบไฟล์รูปภาพในบอร์ด Mindphp
โดย numtan5839 พฤ 07 พ.ย. 2019 12:28 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
23
อ 12 พ.ย. 2019 5:53 pm โดย mindphp
ทำไมข้อมูลของใบแจ้งหนี้ถึงไม่แสดงเมื่อกดHeader for report บนระบบERP
โดย nnamfon.26 พฤ 07 พ.ย. 2019 12:13 pm บอร์ด OpenERP - MD-ERP (Main)
5
17
พฤ 07 พ.ย. 2019 6:35 pm โดย mindphp
จะทำอย่างไรให้เราดึงข้อมูล Email ของ admin joomal ออมมาได้ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 11:37 am บอร์ด Joomla Development
4
30
ศ 08 พ.ย. 2019 2:32 pm โดย tsukasaz
ผู้ป่วย 4 โรคเรื้อรัง และมีสิทธิบัตรทอง สามารถขอรับยาที่ร้านขายยาใกล้บ้านได้แล้ว
โดย promotion พฤ 07 พ.ย. 2019 11:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
พฤ 07 พ.ย. 2019 11:16 am โดย promotion