CSS translate ਪ੍ਰਾਪਰਟੀ

定义和用法

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

translate ਗੁਣ ਇਲੀਮੈਂਟ ਨੂੰ ਦੋ-ਮੁੱਢੀ ਸਪੇਸ ਵਿੱਚ ਦੋ ਅਕਸ਼ ਕੋਆਰਡੀਨੇਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਵੀ z ਅਕਸ਼ ਕੋਆਰਡੀਨੇਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਤਿੰਨ-ਮੁੱਢੀ ਸਪੇਸ ਵਿੱਚ ਸਥਾਨ ਬਦਲ ਸਕੋ ਜਾਂਦੇ ਹਨ。

ਨਿਊਨਤਮ ਕੋਆਰਡੀਨੇਟ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜਿਵੇਂ ਕਿ x ਅਕਸ਼ ਕੋਆਰਡੀਨੇਟ, x ਅਤੇ y ਅਕਸ਼ ਕੋਆਰਡੀਨੇਟ ਜਾਂ x, y ਅਤੇ z ਅਕਸ਼ ਕੋਆਰਡੀਨੇਟ。

ਬਿਹਤਰ ਸਮਝ ਲਈ translate ਗੁਣ ਦੇ ਬਾਰੇ ਵਿੱਚ ਵੇਰਵੇ ਲਈ ਦੇਖੋ:ਪ੍ਰਦਰਸ਼ਨ.

ਸੁਝਾਅ:z ਅਕਸ਼ ਦੇ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਲਈ ਤੁਸੀਂ CSS perspective ਗੁਣ ਦਾ ਇੱਕ ਮੁੱਲ ਸੈਟ ਕਰਨਾ ਹੋਵੇਗਾ。

ਨੋਟ:ਐਲੀਮੈਂਟ ਨੂੰ ਟਰਾਂਸਲੇਟ ਕਰਨ ਦਾ ਦੂਜਾ ਤਕਨੀਕ ਹੈ ਜਿਸ ਵਿੱਚ ਇਸ ਦੇ ਨਾਲ 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;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
x-axis

x ਅਕਸ਼ 'ਤੇ ਸਥਾਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਸੰਭਵ ਮੁੱਲ:

  • ਲੰਬਾਈ
  • ਪ੍ਰਤੀਸ਼ਤ
y-axis

y ਅਕਸ਼ 'ਤੇ ਸਥਾਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਸੰਭਵ ਮੁੱਲ:

  • ਲੰਬਾਈ
  • ਪ੍ਰਤੀਸ਼ਤ
z-axis

z ਅਕਸ਼ 'ਤੇ ਸਥਾਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਸੰਭਵ ਮੁੱਲ:

  • ਲੰਬਾਈ
  • ਪ੍ਰਤੀਸ਼ਤ
initial ਇਹ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial.
inherit ਇਹ ਗੁਣ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤ ਕਰਦਾ ਹੈ। ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: none
ਵਿਰਾਸਤ: ਨਹੀਂ
ਆਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਮਰਥਨ ਕਰਦੇ ਹਨ। ਦੇਖੋ:ਆਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ.
ਸੰਸਕਰਣ: 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 ਪ੍ਰਤੀਯੋਗਿਤਾ