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