CSS 3D ਟਰਾਂਸਫਾਰਮ

CSS 3D ਟਰਾਂਸਫਾਰਮ

CSS 3D ਟਰਾਂਸਫਾਰਮ ਦੀ ਸਹਾਇਤਾ ਵੀ ਕਰਦਾ ਹੈ।

ਮਾਊਸ ਨੂੰ ਹੇਠਲੇ ਇਲੈਕਟ੍ਰੋਨ ਉੱਤੇ ਲਗਾਓ, ਤਾਕਿ 2D ਅਤੇ 3D ਟਰਾਂਸਫਾਰਮ ਦਰਮਿਆਨ ਅੰਤਰ ਦੇਖ ਸਕੋ:

2D rotate
3D rotate

ਇਸ ਖੰਡ ਵਿੱਚ ਤੁਸੀਂ ਨਿਮਨਲਿਖਤ CSS ਪ੍ਰਤੀਭਾਵਾਂ ਨੂੰ ਸਿੱਖੋਗੇ:

  • transform

ਬਰਾਅਜ਼ਰ ਸਮਰੱਥਾ

ਸ਼ੂਟਰ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਇਹ ਪ੍ਰਤੀਭਾਵ ਦੇ ਪਹਿਲੇ ਬਰਾਅਜ਼ਰ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮਦਦ ਦਿੰਦੇ ਹਨ

ਪ੍ਰਤੀਭਾਵ ਚਰਮ ਆਈਈ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D ਟਰਾਂਸਫਾਰਮ ਮੱਥਕ

ਦੁਆਰਾ CSS transform ਪ੍ਰਤੀਭਾਵ ਵਿੱਚ ਤੁਸੀਂ ਨਿਮਨਲਿਖਤ 3D ਟਰਾਂਸਫਾਰਮ ਮੱਥਕਾਂ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() ਮੱਥਕ

ਰੋਟੇਟ ਐਕਸ

rotateX() ਐਲੀਮੈਂਟ ਨੂੰ X ਅਕਸ਼ ਉੱਤੇ ਦਿੱਤੇ ਹੋਏ ਕੋਣ ਦੇ ਅਨੁਸਾਰ ਘੁਮਾਉਣਾ

ਉਦਾਹਰਣ

#myDiv {
  transform: rotateX(150deg);
}

ਸਾਈਨ ਪ੍ਰਯੋਗ

rotateY() ਮੱਥਕ

ਰੋਟੇਟ ਵਾਈ

rotateY() ਐਲੀਮੈਂਟ ਨੂੰ Y ਅਕਸ਼ ਉੱਤੇ ਦਿੱਤੇ ਹੋਏ ਕੋਣ ਦੇ ਅਨੁਸਾਰ ਘੁਮਾਉਣਾ

ਉਦਾਹਰਣ

#myDiv {
  transform: rotateY(130deg);
}

ਸਾਈਨ ਪ੍ਰਯੋਗ

rotateZ() ਮੱਥਕ

rotateZ() ਐਲੀਮੈਂਟ ਨੂੰ Z ਅਕਸ਼ ਉੱਤੇ ਦਿੱਤੇ ਹੋਏ ਕੋਣ ਦੇ ਅਨੁਸਾਰ ਘੁਮਾਉਣਾ

ਉਦਾਹਰਣ

#myDiv {
  transform: rotateZ(90deg);
}

ਸਾਈਨ ਪ੍ਰਯੋਗ

CSS ਟਰਾਂਸਫਾਰਮ ਪ੍ਰਤੀਭਾਵ

ਹੇਠ ਦੇ ਸ਼ੂਟਰ ਵਿੱਚ ਸਾਰੇ 3D ਟਰਾਂਸਫਾਰਮ ਪ੍ਰਤੀਭਾਵ ਦੱਸੇ ਗਏ ਹਨ:

ਪ੍ਰਤੀਭਾਵ ਵਰਣਨ
transform 2D ਜਾਂ 3D ਟਰਾਂਸਫਾਰਮ ਲਾਗੂ ਕਰੋ
transform-origin ਟਰਾਂਸਫਾਰਮ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਦਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ
transform-style ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਐਲੀਮੈਂਟ ਨੂੰ 3D ਸਪੇਸ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਾਇਆ ਜਾਵੇ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰੋ
perspective 3D ਐਲੀਮੈਂਟ ਦੇ ਪਰਸਪੈਕਟਿਵ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ
perspective-origin 3D ਐਲੀਮੈਂਟ ਦੇ ਹੇਠਲੇ ਸਥਾਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ
backface-visibility ਅੰਦਰੂਨੀ ਤਰਫ ਨਜ਼ਰ ਨਾ ਆਉਣ ਤੋਂ ਬਾਅਦ ਇਲੈਕਟ੍ਰੌਨਿਕ ਵਿਕਰਮ ਦੇ ਪਹਿਲੂ ਦੀ ਨਜ਼ਰ ਅੰਦਾਜ਼ਾ ਲਗਾਓ

CSS 3D ਟਰਾਂਸਫਾਰਮ ਮੱਥਕ

ਫੰਕਸ਼ਨ ਵਰਣਨ
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 16 ਮੁੱਲਾਂ ਵਾਲੇ 4x4 ਮੈਟ੍ਰਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ 3D ਟਰਾਂਸਫਾਰਮ ਦੇਣਾ
translate3d(x,y,z) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
translateX(x) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
translateY(y) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
translateZ(z) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
scale3d(x,y,z) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
scaleX(x) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
scaleY(y) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
scaleZ(z) ਤਿੰਨ ਮੋਡਲ ਜਾਂਚ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ
rotate3d(x,y,z,ਕੋਣ) 3D ਰੋਟੇਸ਼ਨ ਦੇਣ
ਰੋਟੇਸ਼ਨ X (ਕੋਣ) X ਅਕਸ਼ 'ਤੇ ਲਗਾਤਾਰ 3D ਰੋਟੇਸ਼ਨ ਦੇਣ
ਰੋਟੇਸ਼ਨ Y (ਕੋਣ) Y ਅਕਸ਼ 'ਤੇ ਲਗਾਤਾਰ 3D ਰੋਟੇਸ਼ਨ ਦੇਣ
ਰੋਟੇਸ਼ਨ Z (ਕੋਣ) Z ਅਕਸ਼ 'ਤੇ ਲਗਾਤਾਰ 3D ਰੋਟੇਸ਼ਨ ਦੇਣ
ਪਰਸਪੈਕਟਿਵ (n) 3D ਟਰਾਂਸਫਾਰਮ ਏਲੀਮੈਂਟ ਦੀ ਪਰਸਪੈਕਟਿਵ ਵਿਜੂਅਲ ਵਿਚਾਰ ਦੇਣ ਲਈ ਪਰਸਪੈਕਟਿਵ ਵਿਚਾਰ ਦੇਣ