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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
พิมพ์ข้อความเว็บบอร์ด แล้วกดไปโดยเว็บบอร์ดที่โชว์ในรูปแบบโทรศัพท์ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 2:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
79
จ 14 ก.ย. 2020 3:05 pm โดย tsukasaz
keyword
โดย Udomsak2539 จ 14 ก.ย. 2020 11:27 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
95
อ 15 ก.ย. 2020 10:07 am โดย Udomsak2539
ลบคอมเม้นของเว็บบอร์ด PHP ยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 10:58 am บอร์ด MindPHP News & Feedback
2
110
จ 14 ก.ย. 2020 11:07 am โดย Udomsak2539
วิธีใช้คีย์ลัดเปลี่ยนภาษาใน Ubantu กดตรงไหนเหรอคะ
โดย fhakun จ 14 ก.ย. 2020 10:56 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
189
พ 16 ก.ย. 2020 5:09 pm โดย chatee supasand
การใส่ใจลูกน้อยวัยทารกที่มีอาการผื่นแดงแพ้ตามลำตัว
โดย medalezga ศ 11 ก.ย. 2020 4:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
135
ศ 11 ก.ย. 2020 4:38 pm โดย medalezga
วิธี Setup SSL ให้กับ GitLab เข้าใช้งาน https ได้ง่ายไม่ต้องแก้ไขโค้ดได้แล้วด้วย GitLab 12
โดย mindphp อ 08 ก.ย. 2020 8:29 pm บอร์ด Linux - Web Server
1
203
อ 08 ก.ย. 2020 8:42 pm โดย mindphp
สอบถามเรื่อง Output ข้อมูล Keywords ที่ได้จาก Youtube ครับ
โดย nai_cyp ส 05 ก.ย. 2020 6:35 pm บอร์ด Programming - C/C++ & java & Python
1
188
ส 05 ก.ย. 2020 7:53 pm โดย mindphp
geckodriver คืออะไรครับ ?
โดย nai_cyp พฤ 03 ก.ย. 2020 10:49 pm บอร์ด Programming - C/C++ & java & Python
2
306
ส 05 ก.ย. 2020 11:33 pm โดย nai_cyp
วิธีเลือกงาน
โดย jataz2 พฤ 03 ก.ย. 2020 5:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
203
พฤ 03 ก.ย. 2020 5:51 pm โดย jataz2
งานที่ได้เงินเดือนเยอะ
โดย jataz2 พฤ 03 ก.ย. 2020 5:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
166
พฤ 03 ก.ย. 2020 5:38 pm โดย jataz2
จัดการขยะ กับน้ำเสีย
โดย jataz2 พฤ 03 ก.ย. 2020 5:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
155
พฤ 03 ก.ย. 2020 5:25 pm โดย jataz2
ปัญหาการบันทึกใบแจ้งหนี้ในระบบ กับใบแจ้งหนี้/ใบกำกับภาษีที่ได้รับจากเจ้าหนี้ไม่ตรงกัน จะต้องทำอย่างไร
โดย natthanit.r2538 พฤ 03 ก.ย. 2020 3:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
145
พฤ 03 ก.ย. 2020 3:51 pm โดย natthanit.r2538
Edge Computing คืออะไร และมีประโยชน์อย่างไร
โดย nai_cyp อ 01 ก.ย. 2020 6:27 pm บอร์ด Share Knowledge
1
202
พฤ 10 ก.ย. 2020 5:15 pm โดย บุคคลทั่วไป
การสร้างบทความและสินค้าไว้ในหน้าเดียวกันในร้านค้าออนไลน์ด้วย Plugin Content Product Match ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:51 pm บอร์ด MindPHP News & Feedback
0
198
อ 01 ก.ย. 2020 3:51 pm โดย bolue
โชว์สินค้าสไลด์ในร้านค้าออนไลน์ด้วย Module Ajax Search ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:42 pm บอร์ด MindPHP News & Feedback
0
120
อ 01 ก.ย. 2020 3:42 pm โดย bolue
โชว์สินค้าสไลด์ในร้านค้าออนไลน์ด้วย Module Product Slide ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:34 pm บอร์ด MindPHP News & Feedback
0
114
อ 01 ก.ย. 2020 3:34 pm โดย bolue
แสดงสถิติของร้านค้าในร้านค้าออนไลน์ด้วย Module Statistics ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:30 pm บอร์ด MindPHP News & Feedback
0
98
อ 01 ก.ย. 2020 3:30 pm โดย bolue
แสดง ratings ของสินค้าในร้านค้าออนไลน์ด้วย Module Products Reviews ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:20 pm บอร์ด MindPHP News & Feedback
0
86
อ 01 ก.ย. 2020 3:20 pm โดย bolue
แสดงป้ายกำกับสินค้าในร้านค้าออนไลน์ด้วย Module Product Labels ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:12 pm บอร์ด MindPHP News & Feedback
0
91
อ 01 ก.ย. 2020 3:12 pm โดย bolue
Import excel .xlxs มีปัญหาอยู่ไฟล์หนึ่งไม่สามารถเเสดงได้ เจอ error ไม่ทราบว่าเกิดจากอะไร
โดย thatsawan อ 01 ก.ย. 2020 11:44 am บอร์ด Programming - PHP
1
448
อ 01 ก.ย. 2020 11:45 am โดย thatsawan