skew කාර්යය
skew කාර්යය අංගයක් ආනත කරයි,
එමගින් එය සෘජුකෝණාස්රයක සිට
සමාන්තර චතුරස්රයකට හැරවීම සිදු කරයි. එය භාවිතා කරන්නේ
transform
ගුණය සමඟ ය.
ගුණයේ අගය වන්නේ කෝණ සඳහා ඕනෑම ඒකකයකිනි.
ආනත කිරීම සිදු වන්නේ
transform-origin
ගුණය මඟින් නිර්ණය කරනු ලබන ලක්ෂ්යය වටා ය.
එය පරාමිති එකක් හෝ දෙකක් පිළිගත හැකිය, කොමාවකින් වෙන් කර දක්වනු ලබන. පරාමිති දෙකක් නම් - පළමු පරාමිතිය තිරස් අතට ආනත කිරීම නිර්ණය කරයි, දෙවන පරාමිතිය සිරස් අතට ආනත කිරීම නිර්ණය කරයි. පරාමිතිය එකක් නම් - එය තිරස් අතට ආනත කිරීම නිර්ණය කරයි (දෙපසට නොවේ). පරාමිති ධන හෝ ඍණ විය හැකිය.
වාක්ය රචනය
තේරුම්ගන්නා {
transform: skew(කෝණ එකක් හෝ දෙකක්);
}
උදාහරණය
මෙම උදාහරණයේ, බ්ලොක් එක 30
අංශක වමට ආනත කර ඇත:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
උදාහරණය
මෙම උදාහරණයේ, බ්ලොක් එක 30
අංශක දකුණට ආනත කර ඇත:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
උදාහරණය
මෙම උදාහරණයේ, බ්ලොක් එක 30
අංශක සිරස් අතට (ධන අගය) ආනත කර ඇත:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
උදාහරණය
මෙම උදාහරණයේ, බ්ලොක් එක 30
අංශක සිරස් අතට (ඍණ අගය) ආනත කර ඇත:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
උදාහරණය
එකවර X සහ Y අක්ෂය ඔස්සේ ආනත කිරීම නිර්ණය කරමු:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
