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

CSS से 3D एलिमेंट्स की बॉटम पोजीशन कैसे निर्दिष्ट करें


3D एलिमेंट्स की बॉटम पोजीशन निर्दिष्ट करने के लिए perspective-origin प्रॉपर्टी का उपयोग करें।

perspective-origin प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          .demo1 {             position: relative;             width: 150px;             height: 150px;             background-color: yellow;             perspective: 80px;             margin: 50px;             perspective-origin: left;          }          .demo2 {             position: absolute;             padding: 20px;             background-color: orange;             transform-style: preserve-3d;             transform: rotateX(45deg);          }       </style>    </head>    <body>       <h1>Rotation</h1>       <div class="demo1">Demo          <div class="demo2">Demo          </div>       </div> </body> </html>

  1. CSS से रिस्पॉन्सिव फ्लोटिंग एलिमेंट्स कैसे बनाएं? CSS से रिस्पॉन्सिव फ्लोटिंग एलिमेंट्स कैसे बनाएं?

    CSS से रिस्पॉन्सिव फ्लोटिंग एलिमेंट्स बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Seg

  1. CSS से एलिमेंट्स को ब्राउज़र विंडो की पूरी ऊंचाई तक कैसे स्ट्रेच करें? CSS से एलिमेंट्स को ब्राउज़र विंडो की पूरी ऊंचाई तक कैसे स्ट्रेच करें?

    CSS से एलिमेंट्स को ब्राउज़र विंडो की पूरी ऊंचाई तक स्ट्रेच करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <title>Page Title</title> <style>    *{       box-sizing: border-box;    }    html, body {

  1. CSS Flex से एलिमेंट को उसके कंटेनर के बॉटम में पोजीशन कैसे करें? CSS Flex से एलिमेंट को उसके कंटेनर के बॉटम में पोजीशन कैसे करें?

    सिंटैक्स CSS flex प्रॉपर्टी का सिंटैक्स निम्नानुसार है: Selector {    flex: /*value*/ } उदाहरण 1 निम्न उदाहरण CSS flex प्रॉपर्टी को दर्शाते हैं। <!DOCTYPE html> <html>    <head>       <style>          div {   &n