Transform origin css что это

transform-origin

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

Синтаксис

Значения

Координата по оси X. Может принимать следующие значения:

Здесь — любая единица измерения CSS.

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

Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).

Оси и значения показаны на рис. 1.

Рис. 1. Оси при трансформации элемента

Пример

HTML5 CSS3 IE Cr Op Sa Fx

       
Пример
  

В данном примере при наведении курсора на элемент он поворачивается на 20 градусов против часовой стрелки относительно правого верхнего угла.

Объектная модель

[window.]document.getElementById(» elementID «).style.transformOrigin

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform-origin .

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform -origin .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transform -origin .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform -origin .

CSS по теме

Свойство transform-origin

Свойство transform-origin задает точку, относительно которой будут происходить трансформации элемента, задаваемые свойством transform . По умолчанию эта точка — центр элемента, и, например, вращение будет происходить относительно его центра. Однако, это поведение можно поменять и заставить элемент вращаться относительно своей стороны, угла или вообще относительно точки, которая лежит вне элемента.

Синтаксис

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию). Сдвиг точки по оси Z нужен для 3D трансформаций.

Значения для оси X

Значение	Описание
CSS единицы	Значением служат любые единицы для размеров, которые задают отступ центра трансформации от левой границы элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное — влево (наружу от элемента) относительно левой границы элемента.
left	Точка вращения по горизонтали на левой границе элемента.
right	Точка вращения по горизонтали на правой границе элемента.
center	Точка вращения по горизонтали в центре элемента.

Значение по умолчанию: center .

Значения для оси Y

Значение	Описание
CSS единицы	Значением служат любые единицы для размеров, которые задают отступ центра трансформации от верхней границы элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное — вверх (снаружу элемента) относительно верхней границы элемента.
top	Точка вращения по вертикали на верхней границе элемента.
bottom	Точка вращения по вертикали на нижней границе элемента.
center	Точка вращения по вертикали в центре элемента.

Значение по умолчанию: center .

Значения по оси Z

Значение	Описание
CSS единицы	Значением служат любые единицы для размеров, которые задают отступ центра трансформации от плоскости элемента. Положительное значение сдвигает его на нас (от плоскости экрана), а отрицательное от нас.

Значение по умолчанию: 0px .

Пример

Сейчас значение свойства transform-origin не задано и блок повернется относительно своего центра. Наведите мышкой на блок, чтобы увидеть эффект:

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

Пример

А теперь при наведении блок повернется относительно верхнего левого угла:

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

Пример

А теперь при наведении блок повернется относительно правого нижнего угла. Для этого следует отнести точку трансформации на 100% вправо и на 100% вниз (можно было бы задать и px, но при изменении размеров элемента точка трансформации осталась бы на месте, поэтому лучше делать в %):

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

Пример

Повернем блок относительно правого верхнего угла:

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

Пример

Повернем блок относительно центра левой стороны. Для этого для оси X зададим left (точка вращения будет слева), а для оси Y — center (точка вращения будет по центру по вертикали):

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

Пример

Свойство можно задавать не только для вращения, но и для других трансформаций. Давайте увеличим масштаб с помощью scale , указав точку трансформации как левый нижний угол:

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

Пример

А теперь укажем точкой трансформации как правый верхний угол:

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

Пример

Точку трансформации можно задавать и вне элемента. В следующем примере по наведению мышкой на красный блок черный блок осуществит поворот относительно точки, которая находится снаружи:

Свойство transform-origin на примере

CSS свойство transform-origin позволяет задать местоположение точки, относительно которой происходит трансформация (смещение, деформация, вращение, масштабирование) элемента. По умолчанию значение свойства transform-origin равно center, поэтому все действия происходят относительно центра.

Но что делать, если нам нужно задать точку фиксации в другом месте? Сейчас мы рассмотрим на примере стикера, условно зафиксированного сверху магнитом к холодильнику.

HTML разметка

Наш стикер будет состоять из двух блоков наложенных друг на друга. Нижний блок темного цвета sticker выступает в роли неподвижной подложки для наглядности. Верхний блок sticker_move изображает сам стикер голубого цвета, который будет смещаться на 10 градусов при наведении мыши на объект. На стикере содержится список ингридиентов для пиццы, расположенных в тегах p.

CSS код

Вся эта конструкция помещена в обертку section для позиционирования стикера в центре страницы.

.section width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
>

Зададим размеры, цвет и отступы у подложки для стикера.

.sticker height: 300px;
width: 300px;
background-color: #666;
margin: 0 50px 50px 0;
position: relative; // родитель для магнита
>

Нарисуем небольшой магнит с помощью псевдоэлемента after. Главная хитрость здесь — это размещение магнита. Позиция магнита должна совпасть с координатами свойства transform-origin, относительно которого будет поворачиваться стикер.

.sticker:after < content: "";
position: absolute; // позиция относительно родителя
top: 0; // фиксация магнита сверху
left: 50%; // фиксация магнита посередине верхнего края стикера
width: 10px;
height: 10px;
background: rgb(123, 255, 0);
border: 5px solid white;
border-radius: 10px;
margin: -10px 0 0 -10px;
>

Обратите внимание, что высота у голубого блока на 40 пикселей меньше, чем у темного за счет паддингов.

.title padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline;
>

.sticker_move display: block;
height: 260px;
background: rgba(0, 174, 255, 0.692);
padding: 20px;
color: white;
font-family: monospace;
transition: rotate 5s linear; // плавный поворот
>

Чтобы создать впечатление, что стикер зафиксирован магнитом именно сверху, укажем у transform-origin значение top. Вы увидите как работает данное свойство, при наведении мыши на объект.

.sticker_move:hover transform: rotate(10deg); // поворот на 10 градусов
transform-origin: top;
>

Демонстрация свойства transform-origin

Уже хорошо освоив HTML/CSS, можно выходить на фриланс биржи. Основываясь на своем личный опыт, я записал полезное видео по Заработку на создании сайтов под заказ.

Создано 24.04.2020 10:34:56

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

css властивість transform-origin

Властивість transform-origin змінює положення точки відносно якої елемент трансформується. Для 2D перетворення дозволено змінювати Х та У вісі. Для 3D перетворення дозволено змінювати Z-вісь елемента. Іншими словами, ця властивість дозволяє нам визначати базову позицію для траснформації елементу.

Відлік координат ведеться від лівого верхнього кута елемента, за замовчуванням точка трансформації знаходиться в його центрі. При використанні відсотків вони беруться від розмірів елемента.

Ця властивість використовується разом з властивістю transform .

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка transform-origin може змінюватися у майбутньому.

Синтаксис

transform-origin: x-axis y-axis z-axis|initial|inherit;

Властивість transform-origin може отримувати 5 значень:

Зміщення по горизонталі (X вісь).

Дозволено використовувати такі значення:

Зміщення по вертикалі (Y вісь).

Дозволено використовувати такі значення:

Зміщення по Z вісі. Дозволено використовувати будь-які одиниці вимірювання довжини прийняті в CSS.

Встановлює властивість у значення без задання

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:	50% 50% 0
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object.style.transformOrigin=»0 0″

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі