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

CSS3 में 3D रूपांतरण


3d ट्रांसफ़ॉर्म का उपयोग करके, हम तत्व को x-अक्ष, y-अक्ष और z-अक्ष में स्थानांतरित कर सकते हैं।

उदाहरण

निम्नलिखित उदाहरण x-अक्ष 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 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल अनुप्रयोगों और वेब पेजों के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम आदि शामिल हैं। कंटेनर में निम्नलिखित गु

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

    ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें ट्रांज़िशन-प्रॉपर्टी, ट्रांज़िशन-अवधि, ट्रांज़िशन-टाइमिंग फ़ंक्शन और ट्रांज़िशन-देरी को एक लाइन में ट्रांज़िशन प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है। CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html

  1. CSS3 के लचीले बॉक्स लेआउट

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