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

सीएसएस का उपयोग करके एक्स अक्ष के साथ तिरछा परिवर्तन को परिभाषित करें

<घंटा/>

आप सीएसएस का उपयोग करके एक्स-अक्ष के साथ-साथ तिरछा परिवर्तन को लागू करने के लिए निम्नलिखित कोड को चलाने का प्रयास कर सकते हैं -

उदाहरण

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg);
           
           /* Safari */
           - webkit-transform: skewX(20deg);
           
           /* Standard syntax */
           transform: skewX(20deg);
        }
      </style>
   </head>
   <body>
      <div>
         Tutorials point.com.
      </div>
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

आउटपुट

सीएसएस का उपयोग करके एक्स अक्ष के साथ तिरछा परिवर्तन को परिभाषित करें


  1. फ्लेक्सबॉक्स के साथ एडवांस सीएसएस लेआउट

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

  1. CSS3 का उपयोग करके फ्लेक्स आइटम को क्रॉस एक्सिस के साथ संरेखित करें

    CSS3 का उपयोग करके फ्लेक्स आइटम को क्रॉस एक्सिस के साथ संरेखित करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container {    height: 200px; &

  1. शुद्ध सीएसएस के साथ आसान स्क्रॉलिंग

    CSS स्क्रॉल-व्यवहार गुण हमें स्क्रॉल के व्यवहार को बदलने की अनुमति देता है। उदाहरण निम्नलिखित उदाहरण CSS स्क्रॉल-व्यवहार गुण को दर्शाते हैं। <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: cent