transform சொத்து உங்களுக்கு ஒரு உறுப்பு நகர்த்த, அளவிட, சுழற்ற, மற்றும் வளைக்க அனுமதிக்கிறது விரைவாக — ஆவணம் தளவமைப்பை பாதிக்காமல் (மற்ற உறுப்புக்கள் நகரவில்லை). இது 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).
அவை தளவமைப்பை தூண்டாமல் நகர்த்த/அளவிட/சுழற்ற முடியும், எனவே அவை சக்திশாலி மற்றும் செயல்திறனை — வலை மீது இயக்கம் அனிமேட் செய்ய பரிந்துரைக்கப்பட்ட வழி.