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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เท็มเพลต 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 - ตรีเนตร บูรณโพธิ์ทอง
5
43
จ 11 พ.ย. 2019 3:49 pm โดย numtan5839
โมดูล JE Quick Contact ขึ้นว่า Warning ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 3:16 pm บอร์ด Joomla Development
5
46
ศ 08 พ.ย. 2019 5:29 pm โดย mindphp
VDO - การใช้โปรแกรมคำนวน ค่าเฉลี่ย, ค่าแปรปรวน, ค่าเบี่ยงเบนมาตราฐาน
โดย numtan5839 พฤ 07 พ.ย. 2019 2:54 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
8
75
อ 12 พ.ย. 2019 6:52 am โดย mindphp
ขั้นตอนการอัดวิดิโอ
โดย 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
17
พฤ 07 พ.ย. 2019 2:11 pm โดย jamepiyawat
วิธีการใช้ curl เพื่อขอข้อมูลเว็บไซต์
โดย jamepiyawat พฤ 07 พ.ย. 2019 1:46 pm บอร์ด PHP Knowledge
0
19
พฤ 07 พ.ย. 2019 1:46 pm โดย jamepiyawat
Joomla 3.9.13 พร้อมให้อัปเดตแล้ว ปรับปรุงความปลอดภัยและระบบให้ดีขึ้น
โดย tsukasaz พฤ 07 พ.ย. 2019 1:14 pm บอร์ด MindPHP News
0
13
พฤ 07 พ.ย. 2019 1:14 pm โดย tsukasaz
VDO - การแนบไฟล์รูปภาพในบอร์ด Mindphp
โดย numtan5839 พฤ 07 พ.ย. 2019 12:28 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
19
พฤ 07 พ.ย. 2019 1:54 pm โดย Ittichai_chupol
ทำไมข้อมูลของใบแจ้งหนี้ถึงไม่แสดงเมื่อกด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
29
ศ 08 พ.ย. 2019 2:32 pm โดย tsukasaz
ผู้ป่วย 4 โรคเรื้อรัง และมีสิทธิบัตรทอง สามารถขอรับยาที่ร้านขายยาใกล้บ้านได้แล้ว
โดย promotion พฤ 07 พ.ย. 2019 11:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พฤ 07 พ.ย. 2019 11:16 am โดย promotion
ทำความเข้าใจกับตัวอักษรที่นำหน้าเลขพัสดุ
โดย numtan5839 พฤ 07 พ.ย. 2019 11:04 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
24
พฤ 07 พ.ย. 2019 11:04 am โดย numtan5839
งานประจำวันที่ 7 พฤศจิกายน 2562
โดย numtan5839 พฤ 07 พ.ย. 2019 10:07 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
9
75
ศ 08 พ.ย. 2019 2:01 pm โดย numtan5839
อยากทราบวิธีการปรับแก้ไข ค่าของคอลลัม in_message ในการแนบไฟล์รูปภาพของ pm ใน phpbb
โดย Ittichai_chupol พ 06 พ.ย. 2019 6:11 pm บอร์ด Programming - PHP
4
45
พ 06 พ.ย. 2019 6:47 pm โดย Ittichai_chupol
4 ขั้นตอนง่ายๆในการทำ Infographic ด้วย Photoshop
โดย numtan5839 พ 06 พ.ย. 2019 6:36 pm บอร์ด Graphic design
0
27
พ 06 พ.ย. 2019 6:36 pm โดย numtan5839
วิธีการสร้าง Brand identity ด้วยโปรแกรม Canva
โดย numtan5839 พ 06 พ.ย. 2019 5:13 pm บอร์ด Graphic design
0
23
พ 06 พ.ย. 2019 5:13 pm โดย numtan5839
ออกแบบ UI ง่ายๆด้วย Adobe illustrator
โดย numtan5839 พ 06 พ.ย. 2019 3:57 pm บอร์ด Graphic design
0
22
พ 06 พ.ย. 2019 3:57 pm โดย numtan5839
ต้องการให้ ฐานข้อมูลบันทึกที่อยู่ของ รูปภาพ
โดย bankjittapol พ 06 พ.ย. 2019 3:51 pm บอร์ด Programming - PHP
1
19
พ 06 พ.ย. 2019 4:01 pm โดย tsukasaz
จะเรียกใช้ api ของกรมอุตุ ได้อย่างไรครับ
โดย jamepiyawat พ 06 พ.ย. 2019 3:02 pm บอร์ด Programming - PHP
1
19
พ 06 พ.ย. 2019 3:10 pm โดย tsukasaz