Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS3 के साथ x-axis का उपयोग करके एलिमेंट को रोटेट ट्रांसफॉर्म करें


CSS3 के साथ x-axis का उपयोग करके एलिमेंट को रोटेट ट्रांसफॉर्म करने के लिए rotateX(angle) मेथड का उपयोग करें:

उदाहरण

<html>    <head>       <style>          div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             -webkit-transform: rotateX(150deg);             /* Safari */             transform: rotateX(150deg);             /* मानक सिंटैक्स */          }       </style>    </head>    <body>       <div>          tutorialspoint.com       </div>       <p>X-axis घुमाएं</p>       <div id = "myDiv">          tutorialspoint.com       </div>    </body> </html>

  1. CSS3 में 3D ट्रांसफॉर्म CSS3 में 3D ट्रांसफॉर्म

    3D ट्रांसफॉर्म 3D ट्रांसफॉर्म के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर घुमा सकते हैं। उदाहरण: x-axis 3D ट्रांसफॉर्म <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black;

  1. CSS3 से Z-axis 3D ट्रांसफॉर्म CSS3 से Z-axis 3D ट्रांसफॉर्म

    Z-axis रोटेशन CSS3 से Z-axis 3D ट्रांसफॉर्म लागू करने के लिए निम्न कोड चलाएं: उदाहरण <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-trans

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

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