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

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;
      }
      div#myDiv {
        -webkit-transform: rotateX(150deg); /* Safari */
        transform: rotateX(150deg); /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <div>My website</div>
    <p>Rotate X-axis</p>
    <div id="myDiv">My website</div>
  </body>
</html>

आउटपुट

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


  1. CSS3 में फ्लेक्स लेआउट मॉडल समझना CSS3 में फ्लेक्स लेआउट मॉडल समझना

    CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (फ्लेक्सिबल बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन्स और वेब पेजेज़ के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम्स आदि शामिल हैं। कंटेनर में निम्न

  1. CSS3 ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी CSS3 ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी

    ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें transition-property, transition-duration, transition-timing function और transition-delay को एक लाइन में transition प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है।CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी का कोड निम्न है -उदाहरण<!DOCTYPE html> <

  1. CSS3 फ्लेक्सिबल बॉक्स लेआउट्स CSS3 फ्लेक्सिबल बॉक्स लेआउट्स

    CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (फ्लेक्सिबल बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन्स और वेब पेजेज़ के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम्स आदि शामिल हैं। कंटेनर में निम्न