সিএসএস(৩) transform-originপ্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| transform-origin(2D) | ৩৬.০ ৪.০ -webkit- |
১২.০ | ১০.০ ৯.০ -ms- |
১৬.০ ৩.৫ -moz- |
৯.০ ৩.২ -webkit- |
২৩.০ ১৫.০ -webkit- ১০.৫ -o- |
| transform-origin(3D) | ৩৬.০ ১২.০ -webkit- |
১২.০ | ১০.০ | ১৬.০ ১০.০ -moz- |
৯.০ ৪.০ -webkit- |
২৩.০ ১৫.০ -webkit- |
সংজ্ঞা ও ব্যবহার
transform-origin প্রোপার্টির মাধ্যমে রুপান্তরিত এলিমেন্টের অবস্থান পরিবর্তন করা যায়।
2D transformation এর মাধ্যমে একটি এলিমেন্টের x এবং y অক্ষের পরিবর্তন করা যায় । আর 3D transformation এর মাধ্যমে একটি এলিমেন্টের z অক্ষকে পরিবর্তন করা যায়।
পরামর্শঃ
- এই প্রোপার্টিটি অবশ্যই transform প্রোপার্টির সাথে একত্রে ব্যবহার করতে হবে ।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ৫০% ৫০% ০ | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
transform-origin: x-axis y-axis z-axis/initial/inherit;
একটি রোটেড এলিমেন্টের বেস প্লেসমেন্ট সেট করিঃ
উদাহরণ
<!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;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"> হ্যালো </div>
</div>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং আগের ভার্সনগুলো ট্রান্সফর্ম-অরিজিন প্রোপার্টি সাপোর্ট করে না । </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object .style.transformOrigin="0 0"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#DIV1 {
height: 200px;
width: 200px;
margin: auto;
border: 1px solid black;
}
#DIV2 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: coral;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
#DIV2original {
position: absolute;
width: 150px;
height: 150px;
border: 1px dashed grey;
background-color: lightgrey;
opacity: 0.5;
}
</style>
</head>
<body>
<p> rotation এর উৎপত্তি সেট করতে " উদাহরণ দেখুন " বাটনে ক্লিক করতে হবে :</p>
<p><b>নোট : </b> গ্রে DIV এলিমেন্টটি নির্দেশ করে DIV2 এলিমেন্টটি transformation ছাড়াই কোথায় যাবে ।</p>
<button onclick="myFunction()"> উদাহরণ দেখুন </button>
<div id="DIV1">DIV1
<div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div>
</div>
<script>
function myFunction() {
// Code for Chrome, Safari, Opera
document.getElementById("DIV2").style.WebkitTransformOrigin = "0 0";
// Code for IE9
document.getElementById("DIV2").style.msTransformOrigin = "0 0";
document.getElementById("DIV2").style.transformOrigin = "0 0";
}
</script>
<p><b>নোটঃ</b>transformOrigin প্রোপার্টি IE8 এবং তার আগের ভার্সনগুলো সাপোর্ট করে না। </p>
<p><b>নোটঃ</b> IE9 msTransformOrigin প্রোপার্টি সাপোর্ট করে এবং এটা IE-এর নতুন ভার্সন। </p>
<p><b>নোটঃ</b> WebkitTransformOrigin প্রোপার্টি Chrome, Safari এবং Opera সাপোর্ট করে। </p>
</body>
</html>
ফলাফল
transform-origin প্রোপার্টির ভ্যালু-সমূহ
- x-অক্ষ - এর দ্বারা সম্পূর্ণ x- অক্ষকে বুঝায়। সম্ভাব্য মানগুলো: বাম, কেন্দ্র, ডান, দৈর্ঘ্য, %
- y- অক্ষ - এর দ্বারা সম্পূর্ণ y- অক্ষকে বুঝায়। সম্ভাব্য মানগুলো : উপর, কেন্দ্র, নিচ, দৈর্ঘ্য, %
- z- অক্ষ - এর দ্বারা সম্পূর্ণ z - অক্ষকে বুঝায় (3D transformation এর জন্য)। সম্ভাব্য মানগুলো: দৈর্ঘ্য
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।