फ़ंक्शन rotateY
फ़ंक्शन rotateY त्रि-आयामी स्थान में Y अक्ष के सापेक्ष
घूर्णन निर्दिष्ट करता है। इसका उपयोग transform
गुण के साथ संयुक्त रूप से किया जाता है।
गुण का मान कोणों की किसी भी इकाई में हो सकता है।
सकारात्मक मान हमारी ओर घुमाता है, नकारात्मक - हमसे दूर की ओर।
घूर्णन उस बिंदु के चारों ओर किया जाता है जो transform-origin
गुण द्वारा निर्दिष्ट होता है।
वाक्य - विन्यास
सिलेक्टर {
transform: rotateY(कोण);
}
उदाहरण
इस उदाहरण में, होवर करने पर ब्लॉक Y अक्ष के सापेक्ष
180 डिग्री घूम जाएगा। घूर्णन की सहजता के लिए
transition
गुण जोड़ा गया है:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateY(180deg);
}
:
उदाहरण
आइए transform-origin
गुण का उपयोग करके घूर्णन अक्ष बदलें:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
