फ़ंक्शन rotateZ

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

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

cssचयनकर्ता {
  transform: rotateZ(कोण);
}

उदाहरण

इस उदाहरण में, होवर करने पर ब्लॉक Z अक्ष पर 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: rotateZ(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: rotateZ(180deg);
}

Результат:

यह भी देखें