HTML DOM Style transformStyle প্রোপার্টি

HTML DOM style transformStyle প্রোপার্টি HTML ডকুমেন্টে একটি এলিমেন্টে 2D বা 3D ট্রান্সফরমেশন প্রয়োগ করে।

সিনট্যাক্স

নিচে সিনট্যাক্স দেওয়া হলো:

• transformStyle রিটার্ন করা

object.style.transformStyle

• transformStyle পরিবর্তন করা

object.style.transformStyle = "value"

মানগুলো

এখানে, value হতে পারে:

উদাহরণ

HTML DOM style transformStyle প্রোপার্টির একটি উদাহরণ দেখি:

<!DOCTYPE html> <html> <head> <style>    body {       background: lightgreen;       height: 100vh;       text-align: center;    }    .outer-box {       position: relative;       height: 200px;       width: 200px;       margin: 80px;       padding: 5px;       border: 2px solid black;    }    .inner-box1 {       padding: 50px;       position: absolute;       background-color: coral;       transform: rotateY(40deg);    }    .inner-box2 {       padding: 40px;       position: absolute;       background-color: lightblue;       transform: rotateY(60deg);    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;       display: block;       color: #fff;       outline: none;       cursor: pointer;       margin: 1rem auto;    } </style> </head> <body> <h1>DOM Style transformStyle Property Example</h1> <div class="outer-box">Outer Box <div class="inner-box1">Inner Box1 <div class="inner-box2">Inner Box2</div> </div> </div> <button onclick="add()" class="btn">Set transformStyle</button> <script>    function add() {       document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";    } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে:

Set transformStyle বাটনে ক্লিক করুন Inner Box 1-এ ট্রান্সফরম স্টাইল প্রয়োগ করতে।