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 ਟਰਾਂਸਲੇਟ ਪ੍ਰਾਪਰਟੀ