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

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

บทที่ 6 CSS3 2D Transforms ตอน 3
3.การย้ายตำแหน่งของวัตถุ
transform:translate(x,y);    x คือ ตัวเลขในแนวนอน เป็นการปรับตั้งแหน่งให้ย้ายไปซ้ายหรือขวาตามแนวนอน   และ y คือตัวเลขในแนวตั้ง เป็นการปรับตำแหน่งให้ย้ายขึ้นบนหรือลงข้างล่าง ตามแนวตั้ง

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

div#div2
{transform:translate(200px,50px);
-ms-transform:translate(200px,50px); /* IE 9 */
-moz-transform:translate(200px,50px); /* Firefox */
-webkit-transform:translate(200px,50px); /* Safari and Chrome */
-o-transform:translate(200px,50px); /* Opera */}
</style>
</head>
<body>

<div>Hello Nerd</div>

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

</body>
</html>

ผลลัพธ์คือ

คำอธิบาย
   การใช้คำสั่ง transform:translate(x,y); ตามตัวอย่างด้านบนนี้ทำให้ได้วัตถุเพิ่มอีกรูปซึ่่งเราสามารถกำหนดตำแหน่งของวัตถุนั้นได้ เช่น
transform:translate(200px,50px); คือปรับให้วัตถุไปด้านขวา 200px และ ปรับให้วัตถุลงมาด้านล่างอีก 50px
  ทั้งการใส่ค่าตัวเลขลงไปนี้ หากใส่เป็นลบ เช่น transform:translate(-200px,-50px); คือปรับให้วัตถุไปด้านซ้าย 200px และ ปรับให้วัตถุขึ้นไปด้านบนอีก 50px 

อ่านเพิ่มเติม
บทที่ 6 CSS3 2D Transforms ตอน 1
บทที่ 6 CSS3 2D Transforms ตอน 2
บทที่ 6 CSS3 2D Transforms ตอน 4
บทที่ 6 CSS3 2D Transforms ตอน 5

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ไม่สามารถเข้าหน้าที่เป็น e-gold Account Access
โดย Anonymous ศ 28 ต.ค. 2005 7:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
2650
ส 29 ต.ค. 2005 8:28 am โดย บุคคลทั่วไป
ช่วยแนะนำ แหล่งดาวน์โหลด ระบบ CMS ให้หน่อยครับ
โดย Anonymous พฤ 27 ต.ค. 2005 1:35 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2494
พฤ 01 ม.ค. 1970 7:00 am โดย 4404
คำถาม
โดย Anonymous พ 26 ต.ค. 2005 7:36 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2121
พ 26 ต.ค. 2005 9:30 am โดย บุคคลทั่วไป
OpenOffice 2.0 มาแล้วครับบบบบบบ
โดย icphysics ศ 21 ต.ค. 2005 11:38 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
1987
ศ 21 ต.ค. 2005 11:38 am โดย icphysics
StormClix ที่แปะไว้ด้านบน ทำไงครับ
โดย Anonymous ศ 21 ต.ค. 2005 9:32 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2169
พฤ 01 ม.ค. 1970 7:00 am โดย 4404
อธิบายให้ทีครับ
โดย Anonymous อ 18 ต.ค. 2005 1:45 pm บอร์ด Programming - PHP
5
3451
พฤ 20 ต.ค. 2005 3:18 pm โดย icphysics
ช่วยด้วยครับ
โดย Anonymous จ 17 ต.ค. 2005 4:06 pm บอร์ด Programming - PHP
3
2952
อ 18 ต.ค. 2005 1:37 pm โดย บุคคลทั่วไป
อยากได้ โค้ด Dynamic Drop Down 3 Level ครับ
โดย somsak ศ 14 ต.ค. 2005 1:09 am บอร์ด Programming - PHP
9
9330
อ 29 พฤษภาคม 2012 2:00 pm โดย บุคคลทั่วไป
ทำไง ให้ php ติดต่อ ฐานข้อมูล Mssql โดยไม่ต้อง ผ่าน odbc
โดย Anonymous ศ 07 ต.ค. 2005 2:42 pm บอร์ด Programming - PHP
11
8259
พฤ 16 มี.ค. 2006 9:23 am โดย Nainotto
ปิดเทอม แล้วอยากฝึก เขียนโปรแกรม ติดตั้ง php apache บนวิน xp
โดย Anonymous จ 03 ต.ค. 2005 7:19 pm บอร์ด Programming - PHP
4
3944
พฤ 18 พฤษภาคม 2006 6:29 pm โดย บุคคลทั่วไป
ความสามารถ ใหม่ ของ Mysql 5.0
โดย Anonymous จ 03 ต.ค. 2005 10:06 am บอร์ด Programming - PHP
1
5654
อ 11 ต.ค. 2005 8:27 pm โดย บุคคลทั่วไป
PHP ครับ อยากหาผลต่างของ ทั้ง 2 อายุครับ
โดย Anonymous พ 28 ก.ย. 2005 4:02 pm บอร์ด Programming - PHP
2
3097
ศ 22 ธ.ค. 2006 12:19 pm โดย mindphp
หาได้ที่ไหน E-books เหล่านี้ หาได้ที่ไหน
โดย Anonymous พ 28 ก.ย. 2005 10:57 am บอร์ด Programming - C/C++ & java & Python
1
9526
ศ 05 พฤษภาคม 2006 5:41 pm โดย บุคคลทั่วไป
อยากให้พี่ การใช้งาน NetBeans
โดย Anonymous อ 25 ก.ย. 2005 1:09 am บอร์ด Programming - C/C++ & java & Python
1
4904
อ 27 มี.ค. 2016 9:56 pm โดย mindphp
เขียน ฟังก์ แบบเรียกตัวเอง กับ วนลูป หา ค่าแฟกทอเรียล
โดย Anonymous จ 19 ก.ย. 2005 5:43 pm บอร์ด Programming - PHP
3
6557
ศ 10 มี.ค. 2006 9:04 am โดย บุคคลทั่วไป
SpinRite 6 โปรแกรม แก้ bed sector
โดย Anonymous จ 05 ก.ย. 2005 9:22 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
4180
จ 05 ก.ย. 2005 11:22 pm โดย บุคคลทั่วไป
ขอถามหน่อยครับ
โดย Anonymous พ 31 ส.ค. 2005 5:22 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2028
พ 31 ส.ค. 2005 6:25 pm โดย บุคคลทั่วไป
Log in เข้า www.omnipay.com ไม่ได้อ่ะค่ะ
โดย Anonymous ส 13 ส.ค. 2005 8:06 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
2075
อ 14 ส.ค. 2005 2:18 am โดย บุคคลทั่วไป
FireFox 1.0.6 มาแล้ว
โดย Anonymous อ 31 ก.ค. 2005 12:48 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
2497
ศ 23 ก.ย. 2005 12:16 pm โดย บุคคลทั่วไป
การติดตั้ง fireFox ภาษาไทย
โดย Anonymous ศ 10 มิ.ย. 2005 5:11 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
2606
พฤ 16 มิ.ย. 2005 3:52 pm โดย บุคคลทั่วไป