transform-origin ගුණය
transform-origin ගුණය එම මූලද්රව්යය සඳහා transform
ගුණය මගින් නියම කරන පරිවර්තන සිදු වන ලක්ෂ්යය නියම කරයි.
පෙරනිමියෙන් මෙම ලක්ෂ්යය මූලද්රව්යයේ මධ්යය වන අතර,
උදාහරණයක් ලෙස, භ්රමණය සිදු වන්නේ එහි මධ්යය අනුව ය.
කෙසේ වෙතත්, මෙම හැසිරීම වෙනස් කළ හැකි අතර
මූලද්රව්යය එහි පැත්තකට, කෙළවරකට හෝ සම්පූර්ණයෙන්ම
මූලද්රව්යයෙන් පිටත පිහිටි ලක්ෂ්යයකට සාපේක්ෂව භ්රමණය වීමට
බල කළ හැකිය.
වාක්ය රීතිය
තෝරන්නා {
transform-origin: X-අක්ෂය Y-අක්ෂය Z-අක්ෂය;
}
Y සහ Z අක්ෂ සඳහා වන අගයන් අනිවාර්ය නොවේ, ඒවා අත් හැර දැමිය හැකිය (ඒවා පෙරනිමි අගයන් ගනී). Z අක්ෂය දිගේ ලක්ෂ්යය මාරු කිරීම 3D පරිවර්තන සඳහා අවශ්ය වේ.
X අක්ෂය සඳහා අගයන්
| අගය | විස්තරය |
|---|---|
| CSS ඒකක | ඕනෑම ප්රමාණ සඳහා ඒකක අගයක් විය හැකිය, එය මූලද්රව්යයේ වම් මායිමේ සිට පරිවර්තන මධ්යයේ ඉවත් වීම නියම කරයි. ධන අගයක් පරිවර්තන මධ්යය දකුණට (මූලද්රව්යය තුළට) මාරු කරයි, සෘණ අගයක් - වමට (මූලද්රව්යයෙන් පිටතට) මූලද්රව්යයේ වම් මායිමට සාපේක්ෂව. |
left |
තිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ වම් මායිමේ. |
right |
තිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ දකුණු මායිමේ. |
center |
තිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ මධ්යයේ. |
පෙරනිමි අගය: center.
Y අක්ෂය සඳහා අගයන්
| අගය | විස්තරය |
|---|---|
| CSS ඒකක | ඕනෑම ප්රමාණ සඳහා ඒකක අගයක් විය හැකිය, එය මූලද්රව්යයේ ඉහළ මායිමේ සිට පරිවර්තන මධ්යයේ ඉවත් වීම නියම කරයි. ධන අගයක් පරිවර්තන මධ්යය පහළට (මූලද්රව්යය තුළට) මාරු කරයි, සෘණ අගයක් - ඉහළට (මූලද්රව්යයෙන් පිටතට) මූලද්රව්යයේ ඉහළ මායිමට සාපේක්ෂව. |
top |
සිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ ඉහළ මායිමේ. |
bottom |
සිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ පහළ මායිමේ. |
center |
සිරස් අතට භ්රමණ ලක්ෂ්යය මූලද්රව්යයේ මධ්යයේ. |
පෙරනිමි අගය: center.
Z අක්ෂය සඳහා අගයන්
| අගය | විස්තරය |
|---|---|
| CSS ඒකක | ඕනෑම ප්රමාණ සඳහා ඒකක අගයක් විය හැකිය, එය මූලද්රව්යයේ තලයේ සිට පරිවර්තන මධ්යයේ ඉවත් වීම නියම කරයි. ධන අගයක් එය අප දෙසට (තිර තලයෙන්) මාරු කරයි, සෘණ අගයක් අපෙන් ඈත් කරයි. |
පෙරනිමි අගය: 0px.
උදාහරණය
දැන් transform-origin ගුණයේ අගය නියම කර නැති අතර බ්ලොක් එක භ්රමණය වන්නේ එහි මධ්යයට සාපේක්ෂව ය. බලපෑම දැකීමට බ්ලොක් එක මත මූසිකය ගෙනයන්න:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
උදාහරණය
දැන් මූසිකය ගෙන යෑමේදී බ්ලොක් එක භ්රමණය වන්නේ ඉහළ වම් කෙළවරට සාපේක්ෂව:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
උදාහරණය
දැන් මූසිකය ගෙන යෑමේදී බ්ලොක් එක භ්රමණය වන්නේ
පහළ දකුණු කෙළවරට සාපේක්ෂව. මේ සඳහා
පරිවර්තන ලක්ෂ්යය දකුණට 100%
සහ පහළට 100% කරා ගෙන යා යුතුය (px හි ද නියම කළ හැකි නමුත්
මූලද්රව්යයේ ප්රමාණ වෙනස් වූ විට
පරිවර්තන ලක්ෂ්යය ස්ථානයේ රැඳෙනු ඇත,
එම නිසා % හි කිරීම වඩා හොඳය):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
උදාහරණය
බ්ලොක් එක ඉහළ දකුණු කෙළවරට සාපේක්ෂව භ්රමණය කරමු:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
උදාහරණය
බ්ලොක් එක වම් පැත්තේ මධ්යයට සාපේක්ෂව භ්රමණය කරමු.
මේ සඳහා X අක්ෂය සඳහා left නියම කරමු (භ්රමණ ලක්ෂ්යය
වම් පැත්තේ වේ), Y අක්ෂය සඳහා - center
(භ්රමණ ලක්ෂ්යය සිරස් අතට මධ්යයේ වේ):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
උදාහරණය
මෙම ගුණය භ්රමණය සඳහා පමණක් නොව,
වෙනත් පරිවර්තන සඳහා ද නියම කළ හැකිය.
අපි scale භාවිතයෙන් විශාලත්වය වැඩි කරමු,
පරිවර්තන ලක්ෂ්යය වම් පහළ කෙළවර ලෙස නියම කරමින්:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
උදාහරණය
දැන් පරිවර්තන ලක්ෂ්යය දකුණු ඉහළ කෙළවර ලෙස නියම කරමු:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
උදාහරණය
පරිවර්තන ලක්ෂ්යය මූලද්රව්යයෙන් පිටත ද නියම කළ හැකිය. පහත උදාහරණයේ රතු බ්ලොක් එක මත මූසිකය ගෙන යෑමේදී කළු බ්ලොක් එක භ්රමණය සිදු කරනු ඇත්තේ පිටත පිහිටි ලක්ෂ්යයකට සාපේක්ෂවයි:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
