CSS translateY() ਫੰਕਸ਼ਨ

ਪਰਿਭਾਸ਼ਨ ਅਤੇ ਵਰਤੋਂ

CSS ਦੇ translateY() ਫੰਕਸ਼ਨ ਨੂੰ ਵਿਅਕਤੀ ਨੂੰ y ਅਕਸ਼ (ਸਥਾਨਕ ਦਿਸ਼ਾ) ਉੱਤੇ ਮੁੜ ਸਥਾਨਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ。

translateY() ਫੰਕਸ਼ਨ ਨੂੰ transform ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਉਦਾਹਰਣ

ਸਥਾਨਕ ਦਿਸ਼ਾ ਵਿੱਚ ਵੱਖ-ਵੱਖ <div> ਵਿਅਕਤੀਆਂ ਨੂੰ ਮੁੜ ਸਥਾਨਿਤ ਕਰੋ:

#myDiv1 {
  transform: translateY(30px); /* ਵਿਅਕਤੀ ਨੂੰ y ਅਕਸ਼ ਉੱਤੇ 30px ਲਟਕਾਉਣਾ */
}
#myDiv2 {
  transform: translateY(50px); /* ਵਿਅਕਤੀ ਨੂੰ y ਅਕਸ਼ ਉੱਤੇ 50px ਲਟਕਾਉਣਾ */
}
#myDiv3 {
  transform: translateY(-10px); /* ਵਿਅਕਤੀ ਨੂੰ y ਅਕਸ਼ ਉੱਤੇ -10px ਲਟਕਾਉਣਾ */
}

ਖੁਦ ਦੋਸ਼ਰਣ ਕਰੋ

CSS ਗਰੇਫਟ

translateY(y)
ਮੁੱਲ ਵਰਣਨ
y ਲਾਜ਼ਮੀ। ਵਿਅਕਤੀ ਨੂੰ y ਅਕਸ਼ ਉੱਤੇ ਲਟਕਾਉਣ ਵਾਲੀ ਦੂਰੀ ਦਾ ਪਰਿਭਾਸ਼ਨ, ਸੰਖਿਆ ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ ਹੋ ਸਕਦੀ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਆਈਈ: CSS Transforms Module Level 1

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਟੇਬਲ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਪਹਿਲੀ ਵਾਰ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਈਈ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
1 12 3.5 3.1 10.5

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ:CSS 2D ਟ੍ਰਾਂਸਫਾਰਮ

ਸਂਦਰਭ:CSS transform ਪ੍ਰਾਪਰਟੀ

ਸਂਦਰਭ:CSS translate() ਫੰਕਸ਼ਨ

ਸਂਦਰਭ:CSS translateX() ਫੰਕਸ਼ਨ

ਸਂਦਰਭ:HTML DOM transform ਪ੍ਰਾਪਰਟੀ