Свойство transform-origin

Описание

Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

Синтаксис

transform-origin: x y z;
Значение Описание
x Координата по оси X. Может принимать следующие значения:

размер | проценты | left | center | right

размер — любая единица измерения CSS.
y Координата по оси Y. Может принимать следующие значения:

размер | проценты | top | center | bottom
z Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).
Отсчёт координат ведётся от левого верхнего угла элемента, по умолчанию точка трансформации находится в его центре, как показано на рисунке выше. При использовании процентов они берутся от размеров элемента.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test {
 background: #fc0;
 padding: 10px;
 display: inline-block;
 border: 1px solid #000;
 transition: 1s;
 transform-origin: 100% 0; /* Точка поворота в правом верхнем углу */
 }
 #test:hover {
 /* Поворачиваем на 20 градусов против часовой стрелки */
 transform: rotate(-20deg);
 }
 </style>
 <div id='test'>Пример</div>
</body>
</html>
Пример

Читайте также