সিএসএস(৩) transform-style প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| transform-style | ৩৬.০ ১২.০ -webkit- |
১২.০ | ১০.০ | ১৬.০ ১০.০ -moz- |
৯.০ ৪.০ -webkit- |
২৩.০ ১৫.০ -webkit- |
সংজ্ঞা ও ব্যবহার
নেস্টেড এলিমেন্ট গুলোতে 3D স্পেস তৈরি করতে transform-style property ব্যবহার করা হয়।
পরামর্শঃ
- এই প্রোপার্টিটি অবশ্যই transform প্রোপার্টির সাথে একত্রে ব্যবহার করতে হবে।
- transform-style প্রোপার্টি সম্পর্কে আরো ভাল ভাবে বুঝতে হলে ডেমোটি দেখুন
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| flat | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
transform-style: flat/preserve-3d/initial/inherit;
রুপান্তরিত চাইল্ড এলিমেন্টে 3D transformations বজায় রাখাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-transform: rotateY(-60deg); /* Chrome, Safari, Opera */
transform: rotateY(-60deg);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"> হ্যালো
<div id="div3"> হলুদ</div>
</div>
</div>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং আগের ভার্সন গুলো ট্রান্সফর্ম-স্টাইল প্রোপার্টি সাপোর্ট করে না </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.transformStyle="প্রিজার্ভ-3d"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#DIV1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#DIV2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: coral;
-webkit-transform: rotateY(50deg); /* Chrome, Safari, Opera */
transform: rotateY(50deg);
}
#DIV3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: lightblue;
-webkit-transform: rotateY(70deg); /* Chrome, Safari, Opera */
transform: rotateY(70deg);
}
</style>
</head>
<body>
<p> DIV2 এলিমেন্টটির চাইল্ড এলিমেন্টের 3D পজিশন বজায় রাখতে " উদাহরণ দেখুন " বাটনে ক্লিক করি :</p>
<button onclick="myFunction()"> উদাহরণ দেখুন</button>
<div id="DIV1">DIV1
<div id="DIV2"> হ্যালো DIV2
<div id="DIV3">হ্যালো DIV3</div>
</div>
</div>
<script>
function myFunction() {
// Code for Chrome, Safari, Opera
document.getElementById("DIV2").style.WebkitTransformStyle = "preserve-3d";
document.getElementById("DIV2").style.transformStyle = "preserve-3d";
}
</script>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং আগের ভার্শন গুলো ট্রান্সফর্মস্টাইল প্রোপার্টি সাপোর্ট করে না </p>
</body>
</html>
ফলাফল
transform-style প্রোপার্টির ভ্যালু-সমূহ
- ফ্ল্যাট - এর দ্বারা বুঝায় যে চাইল্ড এলিমেন্ট গুলো তার 3D পজিশন বজায় রাখবে না। এটা ডিফল্ট ।
- প্রিজার্ভ-3d -এর দ্বারা বুঝায় যে চাইল্ড এলিমেন্ট গুলো তার 3D পজিশন বজায় রাখবে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।