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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ช่วยหน่อยครับเกี่ยวกับ script js (lightbox)
โดย Anonymous อ 22 ส.ค. 2006 11:31 pm บอร์ด Programming - PHP
5
6418
พ 23 ส.ค. 2006 7:02 pm โดย mindphp
PHP 4.4.4 and PHP 5.1.5 ออก แล้ว
โดย mindphp อ 22 ส.ค. 2006 4:01 pm บอร์ด Programming - PHP
0
1741
อ 22 ส.ค. 2006 4:01 pm โดย mindphp
javascript รีโหลด หน้า เก่า เมื่อ ปิด หน้าใหม่ที่เปิดขึ้นมา
โดย mindphp จ 21 ส.ค. 2006 8:08 pm บอร์ด JavaScript & Jquery Ajax
0
3601
จ 21 ส.ค. 2006 8:08 pm โดย mindphp
ผู้รู้ ช่วยหน่อยครับ ไม่สามารถติดต่อ DATABASE ได้ในขณะนี้
โดย Anonymous จ 21 ส.ค. 2006 3:38 am บอร์ด Programming - PHP
1
1773
จ 21 ส.ค. 2006 9:08 am โดย mindphp
อยากเรียนphp
โดย Anonymous ศ 18 ส.ค. 2006 12:52 am บอร์ด Programming - PHP
1
1656
ศ 18 ส.ค. 2006 11:38 am โดย บุคคลทั่วไป
สนใจเรียนphp
โดย Anonymous ศ 18 ส.ค. 2006 12:36 am บอร์ด Programming - PHP
1
1634
ศ 18 ส.ค. 2006 11:38 am โดย บุคคลทั่วไป
ความรู้ โครงสร้างข้อมูล (File Structure)
โดย mindphp พ 16 ส.ค. 2006 11:19 am บอร์ด SQL - Database
0
6362
พ 16 ส.ค. 2006 11:19 am โดย mindphp
การ นำไฟล์ Excel ใส่ฐานข้อมูล phpMyAdmin
โดย umman อ 15 ส.ค. 2006 11:43 pm บอร์ด Programming - PHP
1
3051
พ 16 ส.ค. 2006 2:32 am โดย mindphp
มีปัญหาการติดตั้ง SMF
โดย Supermario จ 14 ส.ค. 2006 11:31 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
4069
อ 20 ส.ค. 2006 10:07 pm โดย mindphp
อเนก
โดย a_bird03 ส 12 ส.ค. 2006 4:39 pm บอร์ด Programming - PHP
1
1599
ส 12 ส.ค. 2006 8:07 pm โดย บุคคลทั่วไป
สร้างแผนที่ด้วยphp
โดย Anonymous ศ 11 ส.ค. 2006 12:49 pm บอร์ด Programming - PHP
8
5369
ศ 16 ธ.ค. 2011 10:16 pm โดย imsn
เกี่ยวกับการ edit,comment pdf
โดย Anonymous พฤ 10 ส.ค. 2006 1:57 am บอร์ด Programming - PHP
1
2019
ศ 11 ส.ค. 2006 9:36 am โดย icphp
สร้าง report เป็นไฟล์ pdf
โดย Anonymous พ 09 ส.ค. 2006 5:49 pm บอร์ด Programming - PHP
4
4664
อ 15 ส.ค. 2006 5:14 am โดย บุคคลทั่วไป
อยากทราบว่าทำอย่างไรให้ php สามารถ convert เป็น pdf ได้
โดย Anonymous พ 09 ส.ค. 2006 1:51 am บอร์ด Programming - PHP
2
2281
อ 15 ส.ค. 2006 5:20 am โดย บุคคลทั่วไป
ต้องการกำหนด การ Upload ไฟล์ใน PHP อย่างไรครับ??
โดย Anonymous จ 07 ส.ค. 2006 4:49 pm บอร์ด Programming - PHP
1
2393
จ 07 ส.ค. 2006 7:32 pm โดย mindphp
ขอคำแนะนำเรื่อง import ข้อมูล
โดย Anonymous อ 06 ส.ค. 2006 4:47 pm บอร์ด Programming - PHP
7
3068
จ 07 ส.ค. 2006 7:23 pm โดย mindphp
อัพเดทข้อมูลหลายrecord
โดย Anonymous ศ 04 ส.ค. 2006 2:42 pm บอร์ด Programming - PHP
10
4238
พฤ 01 ต.ค. 2009 7:25 pm โดย mindphp
การ Upload file โดยเก็บชื่อ file ไว้ในฐานข้อมูล mysql
โดย Anonymous ศ 04 ส.ค. 2006 11:25 am บอร์ด Programming - PHP
2
4472
อ 01 พ.ย. 2016 7:55 am โดย mindphp
อยากทราบเกี่ยวกับฟังชั่นเมล์ใน PHP ครับ
โดย Anonymous ศ 04 ส.ค. 2006 12:05 am บอร์ด Programming - PHP
4
2335
ส 05 ส.ค. 2006 12:08 am โดย mindphp
ผมอยากสร้างรายงานเป็น pdf ช่วยด้วย
โดย Anonymous พฤ 03 ส.ค. 2006 1:58 pm บอร์ด Programming - PHP
3
3830
ส 05 ส.ค. 2006 9:43 am โดย บุคคลทั่วไป