CSS 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|మూల విలువ|పారమ్మార్షికత;

లక్షణ విలువ

విలువ వివరణ
x-axis

x అక్షంపై నెలకొనే స్థానం. సాధ్యమైన విలువలు:

  • పొడవు
  • శాతం
y-axis

y అక్షంపై నెలకొనే స్థానం. సాధ్యమైన విలువలు:

  • పొడవు
  • శాతం
z-axis

z అక్షంపై నెలకొనే స్థానం. సాధ్యమైన విలువలు:

  • పొడవు
  • శాతం
మూల విలువ ఈ లక్షణాన్ని దాని మూల విలువకు అందించండి. చూడండి: మూల విలువ.
పారమ్మార్షికత ఈ లక్షణాన్ని తన పేర్పడ్డ మూలకం నుండి పారమ్మార్షికత సూచించండి. చూడండి: పారమ్మార్షికత.

సాంకేతిక వివరాలు

మూల విలువ సంఖ్యలు కాదు
పారమ్మార్షికత: సంఖ్యలు కాదు
అనిమేషన్ తయారీ: మద్దతు. దయచేసి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
JavaScript సంకేతాలు: object.style.translate="10px 20px"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ వెర్షన్ని సూచిస్తాయి.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
104 104 72 14.1 90

సంబంధిత పేజీలు

CSS పాఠ్యం:CSS 2D ట్రాన్స్‌ఫార్మేషన్

CSS పాఠ్యం:CSS 3D ట్రాన్స్‌ఫార్మేషన్

CSS సూచనలు:CSS scale అట్రిబ్యూట్

CSS సూచనలు:CSS rotate అట్రిబ్యూట్

CSS సూచనలు:CSS perspective అట్రిబ్యూట్