CSS scale کی اپریٹ

定义和用法

ਜਦੋਂ 属性允许你更改元素的大小。

ਜਦੋਂ 属性定义了元素在 x 和 y 方向上的缩放比例值。你也可以定义元素在 z 方向上的缩放比例。

缩放值可以是一个值、两个值或三个值。

  • 如果给出一个值,元素在 x 和 y 方向上的缩放比例相同。
  • ਸਕੇਲ ਮੁੱਲ ਇੱਕ ਮੁੱਲ, ਦੋ ਮੁੱਲ ਜਾਂ ਤਿੰਨ ਮੁੱਲ ਹੋ ਸਕਦੇ ਹਨ。
  • ਜੇਕਰ ਇੱਕ ਮੁੱਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਐਲੀਮੈਂਟ ਹੁਣ 'x' ਅਤੇ 'y' ਦਿਸ਼ਾਵਾਂ 'ਤੇ ਇੱਕ ਸਮਾਨ ਪ੍ਰੋਪਰਸ਼ਨ 'ਤੇ ਸਕੇਲ ਕਰਦਾ ਹੈ。

ਜੇਕਰ ਦੋ ਮੁੱਲ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਐਲੀਮੈਂਟ ਹੁਣ 'x' ਅਤੇ 'y' ਦਿਸ਼ਾਵਾਂ 'ਤੇ ਦਿੱਤੇ ਗਏ ਪ੍ਰੋਪਰਸ਼ਨ 'ਤੇ ਸਕੇਲ ਕਰਦਾ ਹੈ。 ਜਦੋਂ ਜੇਕਰ ਤਿੰਨ ਮੁੱਲ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਐਲੀਮੈਂਟ ਹੁਣ ਸਿਖਰ, 'y' ਅਤੇ 'z' ਦਿਸ਼ਾਵਾਂ 'ਤੇ ਦਿੱਤੇ ਗਏ ਪ੍ਰੋਪਰਸ਼ਨ 'ਤੇ ਸਕੇਲ ਕਰਦਾ ਹੈ。ਬਿਹਤਰ ਸਮਝ ਲਈ

ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਬਾਰੇ ਵਿੱਚ ਦੇਖੋ:ਪ੍ਰਦਰਸ਼ਨ CSS ਸਕੇਲ() ਫੰਕਸ਼ਨ ਨੋਟ: ਜਦੋਂ ਸਕੇਲ ਐਲੀਮੈਂਟ ਦੀ ਦੂਜੀ ਤਕਨੀਕ ਹੈ ਜੋ ਕਿ transform ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਮਦਦ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ

ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਸਰਲ ਅਤੇ ਸਿੱਧੀ ਤਰੀਕੇ ਨਾਲ ਐਲੀਮੈਂਟ ਨੂੰ ਸਕੇਲ ਕਰਨ ਦੀ ਹੈ ਜੋ ਕਿ CSS transform ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।ਇਸ ਵੈੱਬਸਾਈਟ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਵਰਣਨ ਕੀਤੇ ਗਏ ਹਨ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਜਦੋਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੋ ਮੁੱਲ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਉਹ ਵੱਖ-ਵੱਖ ਅਕਸ਼ਾਂ 'x' ਅਤੇ 'y' 'ਤੇ ਸਾਈਜ਼ ਸੈਟ ਕਰਦੇ ਹਨ।ਇੱਥੇ, ਐਲੀਮੈਂਟ 'x' ਅਕਸ਼ ਉੱਤੇ ਦੋ ਗੁਣਾ ਅਤੇ 'y' ਅਕਸ਼ ਉੱਤੇ ਅੱਧੀ ਸਾਈਜ਼ ਵਾਲਾ ਹੁੰਦਾ ਹੈ:
  ਐਲੀਮੈਂਟ ਦਾ ਸਾਈਜ਼ ਬਦਲਣ:
scale: 2 50%;

}

scale: 2;

ਉਦਾਹਰਣ 2 ਜਦੋਂ scale

ਜਦੋਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੋ ਮੁੱਲ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਉਹ ਵੱਖ-ਵੱਖ ਅਕਸ਼ਾਂ 'x' ਅਤੇ 'y' 'ਤੇ ਸਾਈਜ਼ ਸੈਟ ਕਰਦੇ ਹਨ।ਇੱਥੇ, ਐਲੀਮੈਂਟ 'x' ਅਕਸ਼ ਉੱਤੇ ਦੋ ਗੁਣਾ ਅਤੇ 'y' ਅਕਸ਼ ਉੱਤੇ ਅੱਧੀ ਸਾਈਜ਼ ਵਾਲਾ ਹੁੰਦਾ ਹੈ:
  div {
scale: 2 50%;

}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੰਥ ਵਰਣਨ x-axis y-axisscale:

|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਮੁੱਲ
ਵਰਣਨ

x-axis ਉੱਤੇ ਸਕੇਲਿੰਗ ਪ੍ਰੋਪਰਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ।ਸੰਭਵ ਮੁੱਲ:

  • ਨੰਬਰ
  • ਪ੍ਰਤੀਸ਼ਤ
x-axis

y-axis ਉੱਤੇ ਸਕੇਲਿੰਗ ਪ੍ਰੋਪਰਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ।ਸੰਭਵ ਮੁੱਲ:

  • ਨੰਬਰ
  • ਪ੍ਰਤੀਸ਼ਤ
y-axis

z-axis ਉੱਤੇ ਸਕੇਲਿੰਗ ਪ੍ਰੋਪਰਸ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ।ਸੰਭਵ ਮੁੱਲ:

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਤਵੀ ਮੁੱਲ: none
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਪੋਰਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧਤ ਵਿਸ਼ੇਸ਼ਤਾ
ਵਰਜਨ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੰਥ: object.style.scale="2 0.7"

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

ਸਪਰੇਡਸ਼ਨ ਵਿੱਚ ਨੰਬਰ ਪਹਿਲੀ ਸ਼ਾਮਲ ਵਿਸ਼ੇਸ਼ਤਾ ਸਪੋਰਟਿੰਗ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਦੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ。

ਚਰਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
104 104 72 14.1 90

ਸਬੰਧਤ ਪੇਜ਼

ਟੂਰੀਅਲ:CSS 2D ਟ੍ਰਾਂਸਫਾਰਮ

ਟੂਰੀਅਲ:CSS 3D ਟਰਾਂਸਫਾਰਮ

ਸਲਾਹਦਾਰੀਆਂ:CSS rotate کی اپریٹ

ਸਲਾਹਦਾਰੀਆਂ:CSS ਟਰਾਂਸਲੇਟ ਪ੍ਰਾਪਰਟੀ