কম্পিউটার টিউটোরিয়াল

CSS perspective-origin প্রোপার্টি

৩D এলিমেন্টের নিচের পজিশন নির্দিষ্ট করতে 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 Z-Index: জেড-ইন্ডেক্স ব্যবহার করে এলিমেন্ট স্ট্যাকিং নিয়ন্ত্রণ

  2. CSS position: relative

  3. CSS position: static

  4. CSS position: fixed