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

CSS3 के साथ X-अक्ष 3D रूपांतरण

<घंटा/>

आप CSS3 के साथ 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>
         tutorials point.com
      </div>
      <p>
         Rotate X-axis
      </p>
         <div id = "myDiv">
            tutorials point.com.
         </div>
   </body>
 </html>

  1. CSS3 के 3D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना CSS3 के 3D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना

    3डी ट्रांस्फ़ॉर्म का उपयोग करके, हम तत्व को x-अक्ष, y-अक्ष और z-अक्ष में स्थानांतरित कर सकते हैं। CSS3 3D Transform के कुछ तरीके निम्नलिखित हैं - नीचे दी गई विधियों का उपयोग 3D रूपांतरणों को कॉल करने के लिए किया जाता है - क्रमांक मूल्य और विवरण 1 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

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

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

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

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