บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
โฆษณา LINE นั้นมีประโยชน์สำหรับการทำธุรกิจอย่างไร?
โดย admeadme อ 03 มี.ค. 2024 10:49 am บอร์ด Share Knowledge
0
307
อ 03 มี.ค. 2024 10:49 am โดย admeadme View Topic โฆษณา LINE นั้นมีประโยชน์สำหรับการทำธุรกิจอย่างไร?
สอบถามเรื่อง Storage ของ notebook
โดย Narisara ศ 01 มี.ค. 2024 10:13 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
286
พฤ 07 มี.ค. 2024 7:27 pm โดย mindphp View Topic สอบถามเรื่อง Storage ของ notebook
การแทรกข้อความตัวอย่างใน Microsoft Office Word ทำอย่างไรดีหรือไม่
โดย BXP พ 28 ก.พ. 2024 5:04 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
478
พ 28 ก.พ. 2024 5:04 pm โดย BXP View Topic การแทรกข้อความตัวอย่างใน Microsoft Office Word ทำอย่างไรดีหรือไม่
การเป็น Software Tester ที่ดีเป็นแบบไหน
โดย BXP พ 28 ก.พ. 2024 5:03 pm บอร์ด Software testing
0
425
พ 28 ก.พ. 2024 5:03 pm โดย BXP View Topic การเป็น Software Tester ที่ดีเป็นแบบไหน
ขออภัย คุณมีการใช้งานร่วมกันเกินโควต้า
โดย Anonymous พฤ 22 ก.พ. 2024 3:32 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
346
พฤ 22 ก.พ. 2024 6:13 pm โดย mindphp View Topic ขออภัย คุณมีการใช้งานร่วมกันเกินโควต้า
SMS OTP ราคาถูกมีความสำคัญอย่างไรกับธุรกิจของคุณ
โดย admeadme พ 21 ก.พ. 2024 11:33 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
293
พ 21 ก.พ. 2024 11:33 am โดย admeadme View Topic SMS OTP ราคาถูกมีความสำคัญอย่างไรกับธุรกิจของคุณ
ที่เปิดเองน่ะรู้ แต่ที่ไม่รู้คือ โดนแอบเอาไปเปิด
โดย Anonymous พ 14 ก.พ. 2024 8:08 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
393
พ 14 ก.พ. 2024 8:08 pm โดย บุคคลทั่วไป View Topic ที่เปิดเองน่ะรู้ แต่ที่ไม่รู้คือ โดนแอบเอาไปเปิด
Wordpress เว็บไซต์โหลดช้าแล้วขึ้นแบบนี้บ่อยค่ะ ตอนนี้เข้าหลังบ้าน admin กดเข้าอะไรไม่ได้เลย
โดย Anonymous อ 13 ก.พ. 2024 11:38 am บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
327
อ 13 ก.พ. 2024 11:38 am โดย บุคคลทั่วไป View Topic Wordpress เว็บไซต์โหลดช้าแล้วขึ้นแบบนี้บ่อยค่ะ ตอนนี้เข้าหลังบ้าน admin กดเข้าอะไรไม่ได้เลย