বৈশিষ্ট্য transform-origin

transform-origin বৈশিষ্ট্যটি সেই বিন্দুটি নির্ধারণ করে, যার সাপেক্ষে transform বৈশিষ্ট্য দ্বারা নির্ধারিত এলিমেন্টের রূপান্তরগুলি ঘটবে। ডিফল্টভাবে এই বিন্দুটি হল এলিমেন্টের কেন্দ্র, এবং, উদাহরণস্বরূপ, ঘূর্ণন ঘটবে তার কেন্দ্রের সাপেক্ষে। যাইহোক, এই আচরণ পরিবর্তন করা যেতে পারে এবং এলিমেন্টটিকে তার নিজের পাশ, কোণ বা এমনকি বাইরের একটি বিন্দুর সাপেক্ষেও ঘুরতে বাধ্য করা যেতে পারে।

সিনট্যাক্স

cssসিলেক্টর {
  transform-origin: X-অক্ষ Y-অক্ষ Z-অক্ষ;
}

Y এবং Z অক্ষের মানগুলি বাধ্যতামূলক নয়, সেগুলি বাদ দেওয়া যেতে পারে (সেগুলি ডিফল্ট মান গ্রহণ করবে)। Z অক্ষ বরাবর বিন্দুর সরণ 3D রূপান্তরের জন্য প্রয়োজন।

X অক্ষের জন্য মান

ডিফল্ট মান: center।

Y অক্ষের জন্য মান

ডিফল্ট মান: center।

Z অক্ষের জন্য মান

ডিফল্ট মান: 0px।

উদাহরণ

বর্তমানে transform-origin বৈশিষ্ট্যের মান নির্ধারিত নেই এবং ব্লকটি তার কেন্দ্রের সাপেক্ষে ঘুরবে। প্রভাব দেখতে ব্লকের উপর মাউস নিন:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

উদাহরণ

এবং এখন হভারে ব্লকটি উপরের বাম কোণের সাপেক্ষে ঘুরবে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

উদাহরণ

এবং এখন হভারে ব্লকটি ডান নীচের কোণের সাপেক্ষে ঘুরবে। এর জন্য রূপান্তর বিন্দুটিকে ডানদিকে 100% এবং নীচের দিকে 100% এ নিয়ে যেতে হবে (px দ্বারাও নির্ধারণ করা যেত, কিন্তু এলিমেন্টের আকার পরিবর্তন হলে রূপান্তর বিন্দুটি তার জায়গায় থাকত, তাই % এ করা ভাল):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

উদাহরণ

ব্লকটি ডান উপরের কোণের সাপেক্ষে ঘুরানো যাক:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

উদাহরণ

ব্লকটি বাম পাশের কেন্দ্রের সাপেক্ষে ঘুরানো যাক। এর জন্য X অক্ষের জন্য নির্ধারণ করতে হবে left (ঘূর্ণন বিন্দুটি বামে হবে), এবং Y অক্ষের জন্য - center (ঘূর্ণন বিন্দুটি উল্লম্বভাবে কেন্দ্রে হবে):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

উদাহরণ

বৈশিষ্ট্যটি শুধুমাত্র ঘূর্ণনের জন্যই নয়, অন্যান্য রূপান্তরের জন্যও নির্ধারণ করা যেতে পারে। আসুন scale ব্যবহার করে স্কেল বড় করি, রূপান্তর বিন্দু হিসাবে বাম নীচের কোণ নির্দেশ করে:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

উদাহরণ

এবং এখন রূপান্তর বিন্দু হিসাবে নির্দেশ করা যাক ডান উপরের কোণ:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

উদাহরণ

রূপান্তর বিন্দুটি এলিমেন্টের বাইরেও নির্ধারণ করা যেতে পারে। নিম্নলিখিত উদাহরণে, লাল ব্লকের উপর মাউস নিলে কালো ব্লকটি এমন একটি বিন্দুর সাপেক্ষে ঘূর্ণন সম্পাদন করবে যা বাইরে অবস্থিত:

html<div id="hover"></div>
<div id="elem"></div>

css#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);
}

Результат: