বৈশিষ্ট্য transform-origin
transform-origin বৈশিষ্ট্যটি সেই বিন্দুটি নির্ধারণ করে,
যার সাপেক্ষে transform বৈশিষ্ট্য দ্বারা নির্ধারিত
এলিমেন্টের রূপান্তরগুলি ঘটবে।
ডিফল্টভাবে এই বিন্দুটি হল এলিমেন্টের কেন্দ্র,
এবং, উদাহরণস্বরূপ, ঘূর্ণন ঘটবে তার কেন্দ্রের সাপেক্ষে।
যাইহোক, এই আচরণ পরিবর্তন করা যেতে পারে
এবং এলিমেন্টটিকে তার নিজের পাশ, কোণ বা এমনকি বাইরের একটি বিন্দুর সাপেক্ষেও ঘুরতে বাধ্য করা যেতে পারে।
সিনট্যাক্স
সিলেক্টর {
transform-origin: X-অক্ষ Y-অক্ষ Z-অক্ষ;
}
Y এবং Z অক্ষের মানগুলি বাধ্যতামূলক নয়, সেগুলি বাদ দেওয়া যেতে পারে (সেগুলি ডিফল্ট মান গ্রহণ করবে)। Z অক্ষ বরাবর বিন্দুর সরণ 3D রূপান্তরের জন্য প্রয়োজন।
X অক্ষের জন্য মান
| মান | বিবরণ |
|---|---|
| CSS একক | যেকোনো আকারের একক মান হিসাবে কাজ করতে পারে, যা এলিমেন্টের বাম সীমানা থেকে রূপান্তর কেন্দ্রের অফসেট নির্ধারণ করে। ধনাত্মক মান রূপান্তর কেন্দ্রকে ডানদিকে (এলিমেন্টের ভিতরে) নিয়ে যায়, এবং ঋণাত্মক মান - বাম দিকে (এলিমেন্টের বাইরে) এলিমেন্টের বাম সীমানার সাপেক্ষে। |
left |
অনুভূমিকভাবে এলিমেন্টের বাম সীমানায় ঘূর্ণন বিন্দু। |
right |
অনুভূমিকভাবে এলিমেন্টের ডান সীমানায় ঘূর্ণন বিন্দু। |
center |
অনুভূমিকভাবে এলিমেন্টের কেন্দ্রে ঘূর্ণন বিন্দু। |
ডিফল্ট মান: center।
Y অক্ষের জন্য মান
| মান | বিবরণ |
|---|---|
| CSS একক | যেকোনো আকারের একক মান হিসাবে কাজ করতে পারে, যা এলিমেন্টের উপরের সীমানা থেকে রূপান্তর কেন্দ্রের অফসেট নির্ধারণ করে। ধনাত্মক মান রূপান্তর কেন্দ্রকে নীচের দিকে (এলিমেন্টের ভিতরে) নিয়ে যায়, এবং ঋণাত্মক মান - উপরের দিকে (এলিমেন্টের বাইরে) এলিমেন্টের উপরের সীমানার সাপেক্ষে। |
top |
উল্লম্বভাবে এলিমেন্টের উপরের সীমানায় ঘূর্ণন বিন্দু। |
bottom |
উল্লম্বভাবে এলিমেন্টের নীচের সীমানায় ঘূর্ণন বিন্দু। |
center |
উল্লম্বভাবে এলিমেন্টের কেন্দ্রে ঘূর্ণন বিন্দু। |
ডিফল্ট মান: center।
Z অক্ষের জন্য মান
| মান | বিবরণ |
|---|---|
| CSS একক | যেকোনো আকারের একক মান হিসাবে কাজ করতে পারে, যা এলিমেন্টের সমতল থেকে রূপান্তর কেন্দ্রের অফসেট নির্ধারণ করে। ধনাত্মক মান এটিকে আমাদের দিকে (স্ক্রিনের সমতল থেকে) নিয়ে যায়, এবং ঋণাত্মক মান আমাদের থেকে দূরে নিয়ে যায়। |
ডিফল্ট মান: 0px।
উদাহরণ
বর্তমানে transform-origin বৈশিষ্ট্যের মান নির্ধারিত নেই এবং ব্লকটি তার কেন্দ্রের সাপেক্ষে ঘুরবে। প্রভাব দেখতে ব্লকের উপর মাউস নিন:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
উদাহরণ
এবং এখন হভারে ব্লকটি উপরের বাম কোণের সাপেক্ষে ঘুরবে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
উদাহরণ
এবং এখন হভারে ব্লকটি ডান নীচের কোণের সাপেক্ষে ঘুরবে।
এর জন্য রূপান্তর বিন্দুটিকে ডানদিকে 100%
এবং নীচের দিকে 100% এ নিয়ে যেতে হবে (px দ্বারাও নির্ধারণ করা যেত,
কিন্তু এলিমেন্টের আকার পরিবর্তন হলে রূপান্তর বিন্দুটি তার জায়গায় থাকত,
তাই % এ করা ভাল):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
উদাহরণ
ব্লকটি ডান উপরের কোণের সাপেক্ষে ঘুরানো যাক:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
উদাহরণ
ব্লকটি বাম পাশের কেন্দ্রের সাপেক্ষে ঘুরানো যাক।
এর জন্য X অক্ষের জন্য নির্ধারণ করতে হবে left (ঘূর্ণন বিন্দুটি বামে হবে),
এবং Y অক্ষের জন্য - center (ঘূর্ণন বিন্দুটি উল্লম্বভাবে কেন্দ্রে হবে):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
উদাহরণ
বৈশিষ্ট্যটি শুধুমাত্র ঘূর্ণনের জন্যই নয়,
অন্যান্য রূপান্তরের জন্যও নির্ধারণ করা যেতে পারে।
আসুন scale ব্যবহার করে স্কেল বড় করি,
রূপান্তর বিন্দু হিসাবে বাম নীচের কোণ নির্দেশ করে:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
উদাহরণ
এবং এখন রূপান্তর বিন্দু হিসাবে নির্দেশ করা যাক ডান উপরের কোণ:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
উদাহরণ
রূপান্তর বিন্দুটি এলিমেন্টের বাইরেও নির্ধারণ করা যেতে পারে। নিম্নলিখিত উদাহরণে, লাল ব্লকের উপর মাউস নিলে কালো ব্লকটি এমন একটি বিন্দুর সাপেক্ষে ঘূর্ণন সম্পাদন করবে যা বাইরে অবস্থিত:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
