CSS rotateX() ਫੰਕਸ਼ਨ

ਨਿਰਮਾਣ ਅਤੇ ਵਰਤੋਂ

CSS rotateX() ਫੰਕਸ਼ਨ ਐਲੀਮੈਂਟ ਨੂੰ x ਅਕਸ਼ ਦੇ ਆਸਪਾਸ 3D ਰੋਟੇਸ਼ਨ ਦਿੰਦਾ ਹੈ。

rotateX() ਫੰਕਸ਼ਨ ਵਿੱਚ transform ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਵਰਤੋਂ

ਪ੍ਰਯੋਗ

ਉਦਾਹਰਣ 1

ਵਰਤੋਂ rotateX() ਕਈ <div> ਐਲੀਮੈਂਟਾਂ ਨੂੰ x ਅਕਸ਼ ਦੇ ਆਸਪਾਸ ਰੋਟੇਸ਼ਨ ਕਰੋ:

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਵਰਤੋਂ rotateX() ਚਿੱਤਰ ਨੂੰ x ਅਕਸ਼ ਦੇ ਆਸਪਾਸ ਰੋਟੇਸ਼ਨ ਕਰੋ:

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਫਟ

rotateX(angle)
ਮੁੱਲ ਵਰਣਨ
angle

ਲੋੜੀਦਾ ਹੈ। ਸ਼ਾਇਦ ਰੋਟੇਸ਼ਨ ਅਨੁਮਾਨ ਦੇਣਾ। ਸੰਭਵ ਇਕਾਈਆਂ:

  • deg（ਡਿਗਰੀ）
  • rad（ਰੇਡੀਅਨ）
  • turn（ਸਰਕਲ）

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਆਈਡੀਅਨਾ: CSS Transforms ਮੌਡਿਊਲ ਲੈਵਲ 2

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

ਟੇਬਲ ਵਿੱਚ ਸੰਖਿਆ ਪਹਿਲੀ ਵਾਰ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਈਡੀ ਹੈ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
12 12 10 4 15

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ ਪੁਸਤਕਾਕਾਰCSS 3D ਟ੍ਰਾਂਸਫਾਰਮ

مراجع:CSS ٹرانسفارم اپریٹر

مراجع:CSS rotate ਪ੍ਰਤੀਯੋਗਿਤਾ

مراجع:CSS رات() فانکشن

مراجع:CSS رات3د() فانکشن

مراجع:CSS رات3د() فانکشن

مراجع:CSS رات3د() فانکشن