rotateX ශ්රිතය
rotateX ශ්රිතය ත්රිමාණ අවකාශයේ X අක්ෂයට සාපේක්ෂව
කැරකැවීමක් අර්ථ දක්වයි. එය
transform ගුණය සමඟ
එක්ව භාවිතා වේ. ගුණයේ අගය කෝණ ඒකක
යම් ඒකකයකින් දක්වන කෝණයකි. ධන අගයක් අප දෙසට කරකවන අතර
ඍණ අගයක් අපගෙන් ඉවතට කරකවයි. කැරකැවීම සිදුවන්නේ
transform-origin
ගුණය මගින් අර්ථ දක්වන ලක්ෂ්යය වටා ය.
වාක්ය ඛණ්ඩනය
තෝරන්නා {
transform: rotateX(කෝණය);
}
උදාහරණය
මෙම උදාහරණයේ, සෘජුකෝණාස්රය මත සුළඟ ගැසූ විට
X අක්ෂය වටා අංශක 180 කෝණයකින් කැරකෙනු ඇත. කැරකැවීම
සුමට කිරීම සඳහා
transition ගුණය එකතු කර ඇත:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
උදාහරණය
transform-origin
ගුණය භාවිතා කර කැරකැවීමේ අක්ෂය වෙනස් කරමු:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
උදාහරණය
ඍණ කෝණයක් නියම කරමු:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
