translate ශ්‍රිතය

translate ශ්‍රිතය X අක්ෂය හා Y අක්‍ෂය ඔස්සේ මූලද්‍රව්‍යයක් මාරු කරයි. transform ගුණය සමඟ එක්ව භාවිතා කරයි. ගුණයේ අගය ලෙස ප්‍රමාණය සඳහා ඕනෑම ඒකක යොදා ගත හැක.

පරාමිතියක් හෝ දෙකක් ලබා ගත හැක. පරාමිති දෙකක් තිබේ නම් - පළමු පරාමිතිය X අක්ෂය ඔස්සේ මාරුව නිර්වචනය කරන අතර, දෙවැන්න Y අක්ෂය ඔස්සේ මාරුව නිර්වචනය කරයි. පරාමිතිය එකක් තිබේ නම්, එය X අක්ෂය ඔස්සේ මාරුව නිර්වචනය කරයි.

පරාමිතිවල අගයන් ධන හෝ ඍණ විය හැක. X අක්ෂය ඔස්සේ ධන අගයක් දකුණට මාරු කරන අතර, ඍණ අගයක් - වමට මාරු කරයි. Y අක්ෂය ඔස්සේ ධන අගයක් පහළට මාරු කරන අතර, ඍණ අගයක් - ඉහළට මාරු කරයි.

වාක්‍ය රීතිය

තෝරන්නා {
	transform: translate(X අක්ෂය ඔස්සේ මාරුව, Y අක්ෂය ඔස්සේ මාරුව);
}

උදාහරණය

කොටුව මත මූසිකය තැබුවහොත් - එය දකුණට 30px මාරු වේ:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(30px);
}

උදාහරණය

කොටුව මත මූසිකය තැබුවහොත් - එය වමට 30px මාරු වේ:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(-30px);
}

උදාහරණය

කොටුව මත මූසිකය තැබුවහොත් - එය දකුණට 15px සහ පහළට 30px මාරු වේ:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	transform: translate(15px, 30px);
}

මෙයද බලන්න

translateX ශ්‍රිතය,
X අක්ෂය ඔස්සේ මාරුව නිර්වචනය කරයි
translateY ශ්‍රිතය,
Y අක්ෂය ඔස්සේ මාරුව නිර්වචනය කරයි