CSS transform ਪ੍ਰਾਪਰਟੀ
- ਪਿਛਲਾ ਪੰਨਾ ਟਾਪ
- ਅਗਲਾ ਪੰਨਾ transform-origin
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
transform ਪ੍ਰਤੀਭਾਵ ਨੂੰ ਐਲੀਮੈਂਟ 'ਤੇ 2D ਜਾਂ 3D ਟਰਾਂਸਫਾਰਮੇਸ਼ਨ ਲਾਉਂਦਾ ਹੈ। ਇਹ ਪ੍ਰਤੀਭਾਵ ਸਾਨੂੰ ਐਲੀਮੈਂਟ ਨੂੰ ਚੱਕਰ ਲਗਾਉਣ, ਸਾਈਜ਼ ਕਰਨ, ਹਟਾਉਣ ਜਾਂ ਚੱਕਰ ਲਗਾਉਣ ਦੀ ਪ੍ਰਵਾਨਗੀ ਦਿੰਦਾ ਹੈ。
transform ਪ੍ਰਤੀਭਾਵ ਨੂੰ ਬਿਹਤਰ ਸਮਝਣ ਲਈ ਇਹ ਦੇਖੋ:ਪ੍ਰਦਰਸ਼ਨ。
ਹੋਰ ਦੇਖੋ:
CSS3 ਸਿੱਖਿਆ:CSS3 2D ਟਰਾਂਸਫਾਰਮ
CSS3 ਸਿੱਖਿਆ:CSS3 3D ਟਰਾਂਸਫਾਰਮ
HTML DOM ਸਮਾਧਾਨ ਮੁੱਲਾਂ:transform ਪ੍ਰਤੀਭਾਵ
ਉਦਾਹਰਣ
div ਐਲੀਮੈਂਟ ਨੂੰ ਚੱਕਰ ਲਗਾਓ:
div
{
transform:rotate(7deg);
}
ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ ਉਦਾਹਰਣ ਹਨ。
CSS ਗਰੰਥ
transform: none|transform-functions;
ਪ੍ਰਤੀਭਾਵ
| ਮੁੱਲ | ਵਰਣਨ | ਟੈਸਟ |
|---|---|---|
| none | ਟਰਾਂਸਫਾਰਮੇਸ਼ਨ ਨਹੀਂ ਕਰੋ。 | ਟੈਸਟ |
| matrix(n,n,n,n,n,n) | 2D ਟਰਾਂਸਫਾਰਮੇਸ਼ਨ ਦਾ ਅਰਥ ਲਗਾਓ, ਛੇ ਮੁੱਲਾਂ ਵਾਲੀ ਮੈਟ੍ਰਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ。 | ਟੈਸਟ |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 3D ਟਰਾਂਸਫਾਰਮੇਸ਼ਨ ਦਾ ਅਰਥ ਲਗਾਓ, 4x4 ਮੈਟ੍ਰਿਕਸ ਦੇ 16 ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ。 | |
| translate(x,y) | 2D ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| translate3d(x,y,z) | 3D ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | |
| translateX(x) | ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਸਿਰਫ X ਅਕਸ਼ ਦਾ ਮੁੱਲ ਵਰਤੋਂ ਕਰੋ。 | ਟੈਸਟ |
| translateY(y) | ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਸਿਰਫ Y ਅਕਸ਼ ਦਾ ਮੁੱਲ ਵਰਤੋਂ ਕਰੋ。 | ਟੈਸਟ |
| translateZ(z) | 3D ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਸਿਰਫ Z ਅਕਸ਼ ਦਾ ਮੁੱਲ ਵਰਤੋਂ ਕਰੋ。 | |
| scale(x,y) | 2D ਸਕੇਲ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| scale3d(x,y,z) | 3D ਸਕੇਲ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | |
| scaleX(x) | X ਅਕਸ਼ ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਕੇ ਸਕੇਲ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| scaleY(y) | Y ਅਕਸ਼ ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਕੇ ਸਕੇਲ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| scaleZ(z) | Z ਅਕਸ਼ ਦੇ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਕੇ 3D ਸਕੇਲ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | |
| rotate(angle) | 2D ਚੱਕਰ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਸਿਗਨਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| rotate3d(x,y,z,angle) | 3D ਚੱਕਰ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | |
| rotateX(angle) | X ਅਕਸ਼ ਉੱਤੇ 3D ਚੱਕਰ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| rotateY(angle) | Y ਅਕਸ਼ ਉੱਤੇ 3D ਚੱਕਰ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| rotateZ(angle) | Z ਅਕਸ਼ ਉੱਤੇ 3D ਚੱਕਰ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| skew(x-angle,y-angle) | X ਅਤੇ Y ਅਕਸ਼ ਉੱਤੇ 2D ਟਿਕਤੀ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| skewX(angle) | X ਅਕਸ਼ ਉੱਤੇ 2D ਟਿਕਤੀ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| skewY(angle) | Y ਅਕਸ਼ ਉੱਤੇ 2D ਟਿਕਤੀ ਤਬਦੀਲੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
| perspective(n) | 3D ਤਬਦੀਲੀ ਐਲੀਮੈਂਟ ਲਈ ਪਰਸਪੈਕਟਿਵ ਵਿਜ਼ਨ ਨਿਰਧਾਰਿਤ ਕਰੋ。 | ਟੈਸਟ |
ਤਕਨੀਕੀ ਵੇਰਵਾ
| ਮੂਲਧਾਰਾ ਮੁੱਲ: | none |
|---|---|
| ਵਿਰਾਸਤ: | no |
| ਸੰਸਕਰਣ: | CSS3 |
| JavaScript ਵਿਭਾਣ: | object.style.transform="rotate(7deg)" |
ਹੋਰ ਉਦਾਹਰਣ
- ਟੇਬਲ ਉੱਤੇ ਫੇਂਕੇ ਗਏ ਚਿੱਤਰ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਕਿਵੇਂ 'ਬੌਲੀਆਈ' ਚਿੱਤਰ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਚਿੱਤਰ ਨੂੰ ਚੱਕਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਸੰਖਿਆਵਾਂ ਵਿੱਚ ਇਹ ਸੰਖਿਆਵਾਂ ਨੂੰ ਉਸ ਬਰਾਬਰ ਸਬੰਧਤ ਬਰਾਉਜ਼ਰ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਨਾਲ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਜਿਸ ਵਿੱਚ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਹੈ。
ਦੱਸਦਾ ਹੈ ਕਿ -webkit-,-moz- ਜਾਂ -ms- ਪ੍ਰਿਫਿਕਸ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਵਰਤੋਂ ਕੀਤੀ ਗਈ ਹੈ。
| ਵਿਸ਼ੇਸ਼ਤਾ | ਚਰਮੋਨਾ | IE / ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|---|
| transform (2D) | 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 (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- ਪਿਛਲਾ ਪੰਨਾ ਟਾਪ
- ਅਗਲਾ ਪੰਨਾ transform-origin
