Свойство 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>Читайте также
Свойство border-left-width
Устанавливает толщину левой границы элемента....
Свойство margin
Устанавливает величину отступа от границы текущего элемента до внутренней границы его родительского элемента....
Свойство animation
Используется для создания анимации.
Сокращенная запись для свойств animation-name, animation-duration, animation-timing-function, animation-delay, ...
Свойство grid-template-areas
Определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.
Повторение названия области приводит к тому, ч...