Размещение повернутого элемента в верхнем левом или верхнем правом углу

При повороте элемента крайне важно понимать, как происходит преобразование источника влияет на его позиционирование. Это свойство определяет точку, вокруг которой будет вращаться элемент. Настраивая Transform-Origin, вы можете эффективно контролировать конечное положение элемента после вращения.

Чтобы расположить повернутый элемент в верхнем левом углу, измените его Transform-Origin на «top left» и установите для TranslateX значение «-» 100%». Это обеспечит поворот элемента вокруг верхнего левого угла и перемещение в соответствующее положение.

Вот пример кода:

  Picture by Name

body {
  margin: 0;
}

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

И наоборот, чтобы поместить повернутый элемент в верхний правый угол, просто измените Transform-Origin на «верхний правый» и оставьте для параметра TranslateX значение «-100%.

Вы можете изучить эта реализация в предоставленной скрипке: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Не забудьте настроить значения позиционирования по мере необходимости в соответствии с вашими конкретными требованиями. Поэкспериментируйте с различными настройками Transform-Origin, чтобы добиться желаемого выравнивания и расположения повернутых элементов.