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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
บริษัท RCP ลูกค้ายืนยันการใช้งานได้ให้อัพขึ้นฐานจริง
โดย Rujikon พฤ 21 มิ.ย. 2018 7:20 pm บอร์ด Mindphp Task (ทดลองงาน)
2
5
ศ 22 มิ.ย. 2018 3:56 am โดย mindphp
New อัพเดท state auto หลังR- จาก state ของ RMA เป็น deliver [2018-06][003]
โดย Rujikon พฤ 21 มิ.ย. 2018 7:18 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
1
2
พฤ 21 มิ.ย. 2018 7:19 pm โดย Rujikon
R - เปลี่ยนชื่อปุ่ม RMA Line จาก Confirm เป็น Receive [2018-06][002]
โดย Rujikon พฤ 21 มิ.ย. 2018 7:13 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
2
3
พฤ 21 มิ.ย. 2018 7:14 pm โดย Rujikon
Q - Import ไฟล์ Customer เข้าระบบไม่ได้
โดย Rujikon พฤ 21 มิ.ย. 2018 4:49 pm บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
3
8
พฤ 21 มิ.ย. 2018 4:59 pm โดย thatsawan
ยืนยันหน้าจอการทำงานของ auto transfer และคำถาม
โดย nuattawoot พฤ 21 มิ.ย. 2018 2:06 pm บอร์ด Hachanna - Testter
5
27
ศ 22 มิ.ย. 2018 4:13 am โดย mindphp
ฺB - ปรับ Inventory loss แล้วไม่ได้อย่างที่กระทู้แนะนำ [2018-06][009]
โดย Rujikon พฤ 21 มิ.ย. 2018 1:59 pm บอร์ด Hachanna - Testter
0
2
พฤ 21 มิ.ย. 2018 1:59 pm โดย Rujikon
Q - เรื่องภาษี [2018-06][008]
โดย Rujikon พฤ 21 มิ.ย. 2018 1:48 pm บอร์ด Hachanna - Testter
0
5
พฤ 21 มิ.ย. 2018 1:48 pm โดย Rujikon
งานประจำวันที่ 21มิถุนายน 2561
โดย taemmynatchapon พฤ 21 มิ.ย. 2018 10:19 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
1
พฤ 21 มิ.ย. 2018 10:19 am โดย taemmynatchapon
งานประจำวันที่ 21 มิถุนายน 2561
โดย Rujikon พฤ 21 มิ.ย. 2018 10:05 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
8
พฤ 21 มิ.ย. 2018 7:22 pm โดย Rujikon
งานประจำวันที่ 21 มิถุนายน 2561
โดย wilawan พฤ 21 มิ.ย. 2018 9:48 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
12
พฤ 21 มิ.ย. 2018 6:46 pm โดย wilawan
งานประจำวันที่ 21 มิถุนายน 2561
โดย Parichat พฤ 21 มิ.ย. 2018 9:37 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
4
พฤ 21 มิ.ย. 2018 7:14 pm โดย Parichat
เมื่อมีโอกาสทำงาน...
โดย mindphp พฤ 21 มิ.ย. 2018 12:59 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
พฤ 21 มิ.ย. 2018 12:59 am โดย mindphp
R - รายละเอียดวิธีคิดต้นทุนสินค้า [2018-06][007]
โดย Rujikon พ 20 มิ.ย. 2018 8:06 pm บอร์ด Mindphp Task (ทดลองงาน)
0
2
พ 20 มิ.ย. 2018 8:06 pm โดย Rujikon
สอบถามเกี่ยวกับ onclick html
โดย AePongsak พ 20 มิ.ย. 2018 6:33 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
20
พ 20 มิ.ย. 2018 6:33 pm โดย AePongsak
B - ปุ่มปริ้น inv มี 2 ปุ่ม
โดย thatsawan พ 20 มิ.ย. 2018 6:25 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
พ 20 มิ.ย. 2018 6:25 pm โดย thatsawan
R - รายละเอียดวิธีคิดต้นทุนสินค้า [2018-06][007]
โดย Rujikon พ 20 มิ.ย. 2018 4:21 pm บอร์ด Hachanna - Testter
1
13
พ 20 มิ.ย. 2018 9:00 pm โดย Rujikon
B - หน้า Detail ช่องว่างด้านล่างเยอะไป
โดย AePongsak พ 20 มิ.ย. 2018 2:23 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
8
พฤ 21 มิ.ย. 2018 12:00 pm โดย Parichat
B - คลิกที่รูปแล้วไม่ไปหน้า Detail
โดย AePongsak พ 20 มิ.ย. 2018 2:20 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
3
พฤ 21 มิ.ย. 2018 1:11 pm โดย Parichat
B - กรอบหน้าดาวน์โหลดไม่โค้ง
โดย AePongsak พ 20 มิ.ย. 2018 2:11 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
7
พฤ 21 มิ.ย. 2018 5:16 pm โดย Parichat
B - ไม่เห็นตัวเลขที่ แบ่งหน้าสินค้า
โดย AePongsak พ 20 มิ.ย. 2018 2:07 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
3
พฤ 21 มิ.ย. 2018 1:15 pm โดย Parichat