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

CSS के साथ ट्रांसफॉर्म-ओरिजिनल प्रॉपर्टी का उपयोग

<घंटा/>

रूपांतरण-मूल का उपयोग करें सीएसएस के साथ रूपांतरित तत्वों पर स्थिति बदलने के लिए संपत्ति।

उदाहरण

सीएसएस के साथ ट्रांसफॉर्म-ओरिजिन प्रॉपर्टी के साथ काम करने का तरीका जानने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
         }
         .demo2 {
            width: 200px;
            height: 200px;
            background-color: orange;
         }
         .demo3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(10deg);
            transform-origin: 30% 40%;
         }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo
            <div class = "demo3">
               Demo
            </div>
         </div>
      </div>
   </body>
</html>

  1. CSS के साथ ट्रांसफॉर्म-स्टाइल प्रॉपर्टी का उपयोग

    ट्रांसफ़ॉर्म-स्टाइल प्रॉपर्टी . का इस्तेमाल करें यह सेट करने के लिए कि 3D स्थान में नेस्टेड तत्वों का प्रतिपादन कैसे किया जाता है। रूपांतरण-शैली . को लागू करने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं संपत्ति उदाहरण <!DOCTYPE html> <html>    <head>   &nb

  1. सीएसएस के साथ संपत्ति बदलने का उपयोग

    CSS में ट्रांसफॉर्म प्रॉपर्टी का इस्तेमाल किसी एलिमेंट में 2D या 3D ट्रांसफॉर्मेशन लागू करने के लिए किया जाता है। आप परिवर्तन गुण को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं - उदाहरण <!DOCTYPE html> <html>    <head>       <style>  

  1. सीएसएस एनिमेशन के साथ एनिमेट ट्रांसफॉर्म-ओरिजिनल प्रॉपर्टी

    CSS के साथ ट्रांसफॉर्म-ओरिजिन प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo1 {