फ़ंक्शन rotateX

फ़ंक्शन rotateX त्रि-आयामी स्थान में X-अक्ष के सापेक्ष घूर्णन निर्दिष्ट करता है। इसका उपयोग transform गुण के साथ मिलकर किया जाता है। गुण का मान कोणों की किसी भी इकाई में होता है। सकारात्मक मान हमारी ओर घुमाता है, जबकि नकारात्मक मान हमसे दूर की ओर घुमाता है। घूर्णन उस बिंदु के चारों ओर होता है जो transform-origin गुण द्वारा निर्धारित किया जाता है।

वाक्य - विन्यास

cssसिलेक्टर {
  transform: rotateX(कोण);
}

उदाहरण

इस उदाहरण में, होवर करने पर ब्लॉक X-अक्ष पर 180 डिग्री घूम जाएगा। घूर्णन की सहजता के लिए transition गुण जोड़ा गया है:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

उदाहरण

transform-origin गुण का उपयोग करके घूर्णन अक्ष बदलते हैं:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

उदाहरण

एक नकारात्मक कोण निर्धारित करते हैं:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

यह भी देखें