ট্রান্সফর্ম স্টাইল ব্যবহার করুন৷ 3D স্পেসে নেস্টেড উপাদানগুলি কীভাবে রেন্ডার করা হয় তা সেট করতে জাভাস্ক্রিপ্টে সম্পত্তি।
উদাহরণ
জাভাস্ক্রিপ্টের সাথে 3D স্পেসে নেস্টেড উপাদানগুলি কীভাবে রেন্ডার করা হয় তা ফেরাতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন -
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid BLUE;
background-color: green;
transform: rotateY(60deg);
}
#div4 {
padding: 110px;
position: absolute;
border: 2px solid BLUE;
background-color: red;
transform: rotateY(60deg);
}
</style>
</head>
<body>
<button onclick = "display()">Set</button>
<div id = "div1"> DIV1
<div id = "div2"> DIV2
<div id = "div3"> DIV3 </div>
<div id = "div4"> DIV4 </div>
</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transformStyle = "preserve-3d";
}
</script>
</body>
</html> 