সিএসএস(৩) perspective প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| perspective | ৩৬.০ ১২.০ -webkit- |
১০.০ | ১৬.০ ১০.০ -moz- |
৯.০ ৪.০ -webkit- |
২৩.০ ১৫.০ -webkit- |
সংজ্ঞা ও ব্যবহার
3D এলিমেন্ট x অক্ষ এবং y অক্ষের কোথায় অবস্থান করে perspective প্রোপার্টি তা নির্ধারন করে। এই প্রোপার্টি 3D এলিমেন্টের বোটমের অবস্থান পরিবর্তন করতে নির্ধারন করে।
একটি এলিমেন্টের জন্য perspective প্রোপার্টি যখন নির্ধারন করা হয় তখন এর নিজস্ব এলিমেন্টের জন্য অবস্থান নেয় না CHILD এলিমেন্টের জন্য নেয়।
পরামর্শঃ
- এই প্রোপার্টি অবশ্যই perspective প্রোপার্টির সাথে ব্যবহার হবে এবং শুধুমাত্র 3D এলিমেন্টের ট্রান্সফরমের জন্য ব্যবহৃত হবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
perspective-: length/none/initial/inherit;
একটি 3D এলিমেন্টের base এর স্থান সেট করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p><b>নোটঃ </b> perspective-origin প্রোপার্টি Internet Explorer 9 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না। </p>
<div id="div1">
<div id="div2">SATTacademy</div>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.perspectiveOrigin="10px 50% "উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<styled>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 200px; /* Chrome, Safari, Opera */
perspective: 200px;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p><p>DIV1 perspective প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p></p>
<button onclick="myFunction()">Try it</button>
<div id="div1">DIV1
<div id="div2">চিন্তা করুন আপনি একটি ওয়ালের দিকে তাকিয়ে আছেন।
দেখুন perspective প্রোপার্টি ধীরে ধীরে পরিবর্তন হলে কি হয়।</div>
</div>
<script>
function myFunction() {
document.getElementById("div1").style.WebkitPerspective = "100px"; // Chrome, Safari and Opera
document.getElementById("div1").style.perspective = "100px";
}
</script>
</body>
</html>
ফলাফল
perspective প্রোপার্টির ভ্যালু-সমূহ
- length - এর মধ্যে px, pt, cm ইত্যাদি নির্দিষ্ট করা যায়। ডিফল্ট ভ্যালু হিসেবে ০ থাকে।
- none -এটা ডিফল্ট। ডিফল্ট ভ্যালু হিসেবে ০ থাকে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।