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

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

rotateY() मेथड का उपयोग

rotateY(angle) मेथड एलिमेंट को Y-axis (वर्टिकल अक्ष) के चारों ओर 3D स्पेस में घुमाता है। यह एक 3D ट्रांसफॉर्म फंक्शन है।

उदाहरण

<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
      }
      div#yDiv {
        -webkit-transform: rotateY(150deg); /* Safari */
        transform: rotateY(150deg); /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <div>tutorialspoint.com</div>
    <p>Rotate Y axis</p>
    <div id="yDiv">tutorialspoint.com.</div>
  </body>
</html>

नोट: 3D इफेक्ट देखने के लिए पैरेंट पर perspective प्रॉपर्टी या transform: perspective() फंक्शन का उपयोग करें।

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

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

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

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

  1. प्योर CSS के साथ स्मूथ स्क्रॉलिंग प्योर CSS के साथ स्मूथ स्क्रॉलिंग

    परिचय CSS scroll-behavior प्रॉपर्टी हमें स्क्रॉल के व्यवहार को बदलने की अनुमति देती है। जावास्क्रिप्ट के बिना, हम एंकर लिंक्स और प्रोग्रामेटिक स्क्रॉलिंग के लिए स्मूथ स्क्रॉलिंग सक्षम कर सकते हैं। उदाहरण 1: वर्टिकल स्मूथ स्क्रॉल <!DOCTYPE html> <html> <head> <style> h