CSS3 से z-axis का उपयोग करके एलिमेंट को रोटेट करें

rotateZ() मेथड का उपयोग

rotateZ(angle) मेथड का उपयोग किसी एलिमेंट को z-axis (स्क्रीन के लंबवत अक्ष) के चारों ओर घुमाने के लिए किया जाता है। यह 2D रोटेशन के समान है, लेकिन 3D ट्रांसफॉर्म कॉन्टेक्स्ट में उपयोगी होता है।

उदाहरण

<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
      }
      div#zDiv {
        -webkit-transform: rotateZ(90deg); /* Safari */
        transform: rotateZ(90deg); /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <p>rotate Z axis</p>
    <div id="zDiv">
      tutorials point.com.
    </div>
  </body>
</html>

नोट: rotateZ(90deg) एलिमेंट को घड़ी की दिशा में 90 डिग्री घुमाता है। transform-origin प्रॉपर्टी से रोटेशन का केंद्र बदला जा सकता है।