CSS transform-origin ਪ੍ਰਤੀਯੋਗਿਤਾ

ਕੋਰਸ ਸਿਫਾਰਸ਼:

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

transform-origin ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਐਲੀਮੈਂਟ ਦੀ ਸਥਿਤੀ ਬਦਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ。

2D ਟਰਾਂਸਫਾਰਮ ਐਲੀਮੈਂਟ ਨੂੰ ਐਕਸ ਅਤੇ ਵਾਈ ਅਕਸ਼ਾਂ ਉੱਤੇ ਬਦਲ ਸਕਦੇ ਹਨ। 3D ਟਰਾਂਸਫਾਰਮ ਐਲੀਮੈਂਟ ਆਪਣੇ ਜ਼ੀ ਅਕਸ਼ ਨੂੰ ਵੀ ਬਦਲ ਸਕਦੇ ਹਨ。ਪ੍ਰਦਰਸ਼ਨ.

transform-origin ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਬਿਹਤਰ ਸਮਝਣ ਲਈ ਇਹ ਦੇਖੋ:ਪ੍ਰਦਰਸ਼ਨ.

Safari/Chrome ਉਪਭੋਗਤਾ: transform-origin ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ 3D ਟਰਾਂਸਫਾਰਮ ਲਈ ਸਮਝਣ ਲਈ ਇਹ ਦੇਖੋ:ਟਿੱਪਣੀ: transform ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ。

transform ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਬਿਹਤਰ ਸਮਝਣ ਲਈ ਇਹ ਦੇਖੋ:ਪ੍ਰਦਰਸ਼ਨ.

ਹੋਰ ਦੇਖੋ:

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

CSS3 ਸਿੱਖਿਆ:CSS3 3D ਟਰਾਂਸਫਾਰਮ

HTML DOM ਸੂਚਕਾਂਕ:transformOrigin ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਰੋਟੇਸ਼ਨ ਪ੍ਰੋਕਸੀਮੇਟਰ ਨੂੰ ਸੈਟ ਕਰੋ:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

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

ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ ਉਦਾਹਰਣ ਹਨ。

CSS ਗਰੰਥ

transform-origin: x-axis y-axis z-axis;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
x-axis

ਦਿਸ਼ਾ ਨੂੰ ਵਿਅਕਤ ਕਰਨ ਵਾਲੇ ਪਰਿਪੇਖ ਨੂੰ ਕਸਟਮ ਅਕਸ਼ ਉੱਤੇ ਜਿਥੇ ਰੱਖਿਆ ਜਾਵੇ। ਸੰਭਵ ਮੁੱਲ:

  • left
  • center
  • right
  • length
  • %
y-axis

ਦਿਸ਼ਾ ਨੂੰ ਵਿਅਕਤ ਕਰਨ ਵਾਲੇ ਪਰਿਪੇਖ ਨੂੰ ਵਾਈ ਅਕਸ਼ ਉੱਤੇ ਜਿਥੇ ਰੱਖਿਆ ਜਾਵੇ। ਸੰਭਵ ਮੁੱਲ:

  • top
  • center
  • bottom
  • length
  • %
z-axis

ਦਿਸ਼ਾ ਨੂੰ ਵਿਅਕਤ ਕਰਨ ਵਾਲੇ ਪਰਿਪੇਖ ਨੂੰ ਜ਼ੀ ਅਕਸ਼ ਉੱਤੇ ਜਿਥੇ ਰੱਖਿਆ ਜਾਵੇ। ਸੰਭਵ ਮੁੱਲ:

  • length

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: 50% 50% 0
ਵਿਰਾਸਤੀ: no
ਸੰਸਕਰਣ: CSS3
JavaScript ਗਰੰਥ: object.style.transformOrigin="20% 40%"

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

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

ਦੱਸਦਾ ਪੁਲਾਂਘ ਹੈ ਕਿ -webkit-,-moz- ਜਾਂ -ms- ਸਮੇਤ ਨੰਬਰਾਂ ਨੂੰ ਪਹਿਲੀ ਸੰਸਕਰਣ ਦੇ ਪ੍ਰਤੀਕ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਵਿਸ਼ੇਸ਼ਤਾ ਚਰਾਮੇ ਆਈਈ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
transform-origin
(ਦੋ ਮੁੱਲ ਗਰੰਥ)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(ਤਿੰਨ ਮੁੱਲ ਗਰੰਥ)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-