تحديد موضع عنصر تمت استدارته في الزاوية العلوية اليسرى أو العلوية اليمنى

عند تدوير عنصر، من المهم فهم كيفية تحويل الأصل يؤثر على موضعه. تحدد هذه الخاصية النقطة التي سيتم تدوير العنصر حولها. من خلال ضبط أصل التحويل، يمكنك التحكم بشكل فعال في الموضع النهائي للعنصر بعد التدوير.

لوضع عنصر تم تدويره في الزاوية العلوية اليسرى، قم بتعديل أصل التحويل الخاص به إلى "أعلى اليسار" وقم بتعيين TranslatorX إلى "- 100%". سيضمن هذا أن العنصر يدور حول الزاوية اليسرى العليا ويتحرك إلى موضعه المناسب.

إليك مثال للكود:

  Picture by Name

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

على العكس من ذلك، لوضع العنصر الذي تم تدويره في الزاوية اليمنى العليا، ما عليك سوى تغيير أصل التحويل إلى "أعلى اليمين" والحفاظ على تعيين TranslateX على "-100%".

يمكنك الاستكشاف تم توفير هذا التنفيذ في الكمان: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

تذكر ضبط قيم تحديد المواقع حسب الحاجة لتناسب متطلباتك المحددة. قم بتجربة إعدادات مختلفة لأصل التحويل لتحقيق المحاذاة والتخطيط المطلوبين للعناصر التي تم تدويرها.