transform ਪ੍ਰਾਪਰਟੀ ਤੁਹਾਨੂੰ ਇੱਕ ਤੱਤ ਨੂੰ ਵਿਜ਼ੂਅਲ ਤੌਰ ਤੇ ਹਿਲਾਉਣ, ਸਕੇਲ ਕਰਨ, ਘੁੰਮਾਉਣ ਅਤੇ skew ਕਰਨ ਦਿੰਦੀ ਹੈ — ਡੌਕੂਮੈਂਟ ਲੇਆਊਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ (ਹੋਰ ਤੱਤ ਸ਼ਿਫਟ ਨਹੀਂ ਹੁੰਦੇ)। ਇਹ GPU-ਪ੍ਰਵੇਗਿਤ ਹੈ, ਜੋ ਇਸ ਨੂੰ ਐਨੀਮੇਸ਼ਨ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ।
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
ਮਲਟੀਪਲ ਫੰਕਸ਼ਨ ਕ੍ਰਮ ਵਿੱਚ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ; ਕ੍ਰਮ ਨੂੰ ਬਦਲਣਾ ਨਤੀਜਾ ਬਦਲਦਾ ਹੈ (ਘੁੰਮਾਉਣਾ ਫਿਰ ਅਨੁਵਾਦ ਕਰਨਾ ਅਨੁਵਾਦ ਕਰਨ ਤੋਂ ਫਿਰ ਘੁੰਮਾਉਣਾ ਵੱਖ ਹੈ)।
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
width/margin ਨੂੰ ਬਦਲਣ ਦੇ ਉਲਟ, ਇੱਕ transform ਸਿਰਫ ਤੱਤ ਦੀ ਪੇਂਟ ਕੀਤੀ ਦਿੱਖ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ, ਨਾ ਕਿ ਫਲੋ ਵਿੱਚ ਇਸ ਦੇ ਬਕਸੇ ਨੂੰ — ਇਸ ਲਈ ਦੁਆਲੇ ਦੇ ਤੱਤ ਜਗ੍ਹਾ ਉੱਤੇ ਰਹਿੰਦੇ ਹਨ ਅਤੇ ਕੋਈ reflow ਨਹੀਂ ਹੁੰਦਾ। ਇਹ ਬਿਲਕੁਲ ਇਸ ਲਈ ਹੈ ਕਿ Transforms ਨਿਰਮਲ ਹਨ।
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
translate(-50%, -50%) ਸੈਂਟਰਿੰਗ ਟ੍ਰਿਕ ਸਰਵ-ਵਿਆਪੀ ਹੈ — ਇਹ ਤੱਤ ਨੂੰ ਆਪਣੇ ਆਪ ਦੇ ਅਕਾਰ ਦੇ ਅੱਧ ਨਾਲ ਵਾਪਸ ਕਰਦਾ ਹੈ।
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
ਕਿਉਂਕਿ transforms ਲੇਆਊਟ ਅਤੇ ਪੇਂਟ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹਨ (ਸਿਰਫ ਕੰਪੋਜਿਟਿੰਗ), ਐਨੀਮੇਸ਼ਨ 60fps ਤੇ ਰਹਿਣਾ — ਸਥਿਤੀ/ਆਕਾਰ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਨਾਲੋਂ ਬਹੁਤ ਸਸਤੀ।
Transforms CSS ਐਨੀਮੇਸ਼ਨ ਅਤੇ ਸੂਖਮ-ਇੰਟਰਐਕਸ਼ਨ ਦਾ ਕਾਮ ਹੈ (hover lifts, modals, carousels, loading spinners)।
ਉਹ ਲੇਆਊਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕੀਤੇ ਬਿਨਾ ਹਿਲਾਉਂਦੇ/ਸਕੇਲ/ਘੁੰਮਾਉਂਦੇ ਹਨ, ਇਸ ਲਈ ਉਹ ਸ਼ਕਤਿਸ਼ਾਲੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੋਵੇਂ ਹਨ — ਵੈੱਬ ਉੱਤੇ ਗਤੀ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਦਾ ਸਿਫਾਰਿਸ਼ ਕੀਤਾ ਤਰੀਕਾ।