ປະເພດ translate

定义和用法

translate 属性允许您更改元素的位置。

translate 属性定义了元素在二维空间中的 x 轴和 y 轴坐标。您还可以定义 z 轴坐标以在三维空间中更改位置。

坐标可以仅给出 x 轴坐标、x 轴和 y 轴坐标，或者 x 轴、y 轴和 z 轴坐标。

为了更好地理解 translate 属性，请查看演示.

提示：要使 z 轴属性生效，您需要为 CSS perspective 属性定义一个值。

注意：另一种平移元素的技术是使用带有 ຫົວຂໍ້ CSS translate() 的 CSS transform 属性。本页的 CSS translate 属性可以说是一种更简单、更直接的方法来平移元素。

ຄວາມກ່ຽວຂ້ອງ

ກໍານົດ 1

ການປ່ຽນຕົວຂອງບັນດາບັນຊີ:

div {
  translate: 100px 20px;
}

ທົດລອງດາວເອງ

ກໍານົດ 2

ບໍ່ມີການຕັ້ງຄູ່ມົງສາຍດາວ Z: translate ບັນດາປະສົມປະສານທີ່ຈະຕ້ອງຖືກຕັ້ງຢູ່ບັນດາບັນຊີພາຍໂຕ: perspective ບັນດາປະສົມປະສານທີ່ພວກເຮົາສາມາດເຫັນຜົນກະທົບຄື:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

ທົດລອງດາວເອງ

ມາດຕະການ CSS

translate: x-axis y-axis z-axis|initial|inherit;

ຄູ່ມົງບັນດາບັນຊີ

ຂໍ້ມູນດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັນດາບັນຊີ

ຈຳນວນຕົວເລກໃນຕາລະບັນດາບັນຊີສະແດງວ່າບັນດາບັນຊີທີ່ສະໜັບສະໜູນຄວາມມີຄວາມສະດວກຂອງບັນດາບັນຊີນີ້.

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

CSS ການສອນການປ່ຽນແປງ 2D CSS

CSS ການສອນການປ່ຽນແປງ 3D CSS

CSS ການສະແດງປະກາດ scale

CSS ການສະແດງປະກາດ rotate

CSS ການສະແດງປະກາດ perspective