CSS translate คุณสมบัติ
- เพจก่อน transition-timing-function
- หน้าต่อไป unicode-bidi
การกำหนดและการใช้งาน
translate
คุณสมบัตินี้อนุญาตให้คุณเปลี่ยนตำแหน่งขององค์ประกอบ.
translate
คุณสมบัตินี้กำหนดตำแหน่งขององค์ประกอบในสเปลส์สองมิติ. คุณยังสามารถกำหนดตำแหน่งตัว z มิติเพื่อเปลี่ยนตำแหน่งในสเปลส์สามมิติ.
ตัวเลขพิกัดสามมิติสามารถมีเพียงตัวเลขพิกัด x มิติเดียว หรือตัวเลขพิกัด x และ y มิติ หรือตัวเลขพิกัด x, y และ z มิติ.
เพื่อที่จะเข้าใจความหมายของคุณสมบัตินี้ translate
คุณสมบัติการแสดง.
ความช่วยเหลือ:เพื่อที่คุณสมบัติตัว z-axis จะทำงานได้ คุณจะต้องกำหนดค่าให้กับคุณสมบัติ CSS perspective.
แนะนำ:วิธีอื่นที่สามารถย้ายองค์ประกอบได้คือการใช้ CSS translate() ฟังก์ชัน คุณสมบัติ CSS transform ของเราในหน้านี้ สามารถกล่าวว่าเป็นวิธีที่ง่ายและตรงไปตรงมาที่สุดในการย้ายองค์ประกอบ.
ตัวอย่าง
ตัวอย่าง 1
เปลี่ยนตำแหน่งขององค์ประกอบ:
div { translate: 100px 20px; }
ตัวอย่าง 2
เมื่อเราตั้งค่าตัว z-axis translate
ต้องมีคุณสมบัตินี้ในองค์ประกอบพ่อของเราเมื่อเราใช้คุณสมบัติ perspective
เพื่อที่เราจะเห็นผลลัพธ์ของคุณสมบัตินี้ จะต้องมีคุณสมบัตินี้ในองค์ประกอบพ่อของเรา:
DIV1 { perspective: 200px; } DIV2 { translate: 50px 50px 50px; }
ระบบการใช้งาน CSS
translate: x-axis y-axis z-axis|initial|inherit;
ค่าของคุณสมบัติ
ค่า | รายละเอียด |
---|---|
x-axis |
กำหนดตำแหน่งบนตัว x-axis. ค่าที่เป็นไปได้:
|
y-axis |
กำหนดตำแหน่งบนตัว y-axis. ค่าที่เป็นไปได้:
|
z-axis |
กำหนดตำแหน่งบนตัว z-axis. ค่าที่เป็นไปได้:
|
initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู: initial. |
inherit | ขอบคุณสำหรับการสืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเรา. ดู: inherit. |
รายละเอียดเทคโนโลยี
ค่าเริ่มต้น: | none |
---|---|
เชื่อมโยง | ไม่ |
การสร้างอนุรักษ์: | สนับสนุน. ดู:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์. |
รุ่น: | CSS3 |
ระบบการใช้งาน JavaScript: | object.style.translate="10px 20px" |
การสนับสนุนเบราญี่ร
ตัวเลขในตารางนี้แสดงรุ่นเบราญี่รที่สนับสนุนคุณสมบัตินี้เต็มที่。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
104 | 104 | 72 | 14.1 | 90 |
เพจที่เกี่ยวข้อง
CSS ความรู้CSS 2D การเปลี่ยนแปลง
CSS ความรู้CSS 3D การเปลี่ยนแปลง
CSS คู่มือCSS scale ทางแบบ
CSS คู่มือCSS rotate ทางแบบ
CSS คู่มือCSS perspective ทางแบบ
- เพจก่อน transition-timing-function
- หน้าต่อไป unicode-bidi