Css3 transform origin: transform-origin — CSS: Cascading Style Sheets

преобразование происхождения | Коддропс

Свойство transform-origin используется для изменения положения начала преобразования элемента.

Например, вращение элемента вокруг начала координат преобразования приведет к разным результатам поворота в зависимости от положения начала координат.

На следующем изображении показан результат применения rotate() функция преобразования для поворота элемента на 45 градусов (сорок пять градусов) в двумерном пространстве с использованием различных источников преобразования. Черный кружок представляет положение начала преобразования в каждом случае. Функция преобразования применяется с использованием свойства преобразования .

Изображение, показывающее результат поворота элемента с использованием преобразования : rotate(45deg) с различными значениями transform-origin .

Значение по умолчанию источника преобразования равно 9.0019 50% 50% , который является точно центром любого заданного элемента.

Источник преобразования можно указать с помощью ключевых слов смещения, значений длины или процентных значений. Он принимает либо два значения, разделенных пробелами (длина, процент или ключевые слова) для двумерных преобразований, либо три значения, разделенных пробелами, для трехмерных преобразований. Подробности и возможные комбинации см. в разделе «Значения» ниже.

Значения

<процент>

Значение <процент> . Процент горизонтального смещения (первое значение) зависит от ширины рамки. Процент вертикального смещения (второе значение) зависит от высоты рамки. Значение смещения по горизонтали и вертикали представляет собой смещение от верхнего левого угла рамки. См. запись

для списка возможных значений.

<длина>

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

топ

Вычисляет «0%» для вертикального положения.

справа

Вычисляет «100%» для горизонтального положения.

дно

Вычисляет «100%» для вертикального положения.

осталось

Вычисляет «0%» для горизонтального положения.

центр

Вычисляется «50%» (левые 50%) для горизонтального положения, если горизонтальное положение не указано иным образом, или «50%» (верхние 50%) для вертикального положения, если оно указано.

Примечания

Если определены два или более значений и либо значение не является ключевым словом, либо используется только ключевое слово center, то первое значение представляет положение по горизонтали (или смещение), а второе представляет положение по вертикали (или смещение). Третье значение всегда представляет позицию Z (или смещение) и должно иметь тип .

Если указаны все три значения, первое значение представляет смещение по горизонтали, второе значение представляет смещение по вертикали, а третье значение (если имеется) представляет положение по оси Z.

Если указано только одно значение, второе значение считается центральным. Если указано одно или два значения, предполагается, что третье значение равно 0px (для 3D-преобразований).

Примеры

Ниже приведены все допустимые объявления transform-origin :

преобразование-происхождение: верхний центр;
преобразование-происхождение: 100% 30px;
преобразование-происхождение: 30px 60px;
преобразование-происхождение: центр;
преобразование-происхождение: слева;
преобразование-происхождение: 30% 50% 0px;
преобразование-происхождение: внизу справа;
                 

Живая демонстрация

Следующая демонстрация показывает результат поворота элемента с использованием различных значений transform-origin .

Попробуйте изменить значения начала преобразования, чтобы увидеть изменение результата поворота.

Посмотреть эту демонстрацию на игровой площадке Codrops

Поддержка браузера

Свойство transform-origin поддерживается в Chrome (с префиксом -webkit-), Firefox, Safari ( -wekit- ), Opera 10.5+ с префиксом -o- и без префикса, начиная с версии 12.10, Internet Explorer 9 с префиксом -ms- и без префикса, начиная с версии 10, а также на Android и iOS.

Синтаксис с тремя значениями — , а не , который поддерживается в Opera и Internet Explorer до версии 10.

Дополнительная литература

• CSS-преобразования уровня 1

Автор Сара Суэйдан. Последнее обновление: 18 марта 2015 г., 19:44, Сара Суэйдан.

У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

transform-origin · WebPlatform Docs

Резюме

Это свойство определяет начало координат осей преобразования относительно элемента, к которому применяется преобразование.

Обзорная таблица

Исходное значение

50% 50%

Относится к

Трансформируемые элементы.

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

Для <длины> абсолютное значение; иначе процент.

Анимируемый

Да

Объектная модель CSS Свойство
:

Проценты

См. размер ограничивающей рамки элемента.

Синтаксис

• преобразование-происхождение: <имя-позиция>
• преобразование-происхождение: длина
• преобразование-происхождение: процент

Значения

проценты

Число, за которым следует %.

Значение представляет собой процент от ширины ограничивающей рамки (для оси X) или высоты ограничивающей рамки (для оси Y, если указано). Процент не может быть применен к оси Z.

длина

Число с плавающей запятой, за которым следует единица измерения.

Единицы измерения могут быть абсолютными ( см , мм , в , pt или pc ) или относительными ( em , 9000 3 ex , или px ).

<название позиции>

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

Значения слева , по центру и справа действительны для оси X и эквивалентны 0%, 50% и 100% соответственно. Значения верх , центр

и низ действительны для оси Y и эквивалентны 0%, 50% и 100% соответственно. По оси Z нет именованных позиций.

Примеры

 /* 25% смещение по оси X, 50% смещение по оси Y, 0 смещение по оси Z */
#mytranselem {
    преобразование-происхождение: 25% 50%;
}
 

Просмотреть живой пример

 /* 20 пикселей по оси Y, 25 пикселей по оси X, 30 пикселей по оси Z */
#mytranselem {
    преобразование-происхождение: 20px 25px 30px;
}
 

Посмотреть пример в реальном времени

 /* Смещение X вправо, Смещение центра Y, Смещение 0 Z */
#mytranselem {
    преобразование-происхождение: право;
}
 

Просмотреть живой пример

Примечания

Исходную точку можно перемещать по всем трем осям с помощью этого единственного свойства, указав относительное положение каждой оси в порядке X, Y, Z. Сетка соответствует правилу правой руки для декартовых систем координат. Ось x увеличивается слева направо; ось Y увеличивается сверху вниз; а ось z увеличивается по мере удаления от пользователя (чем больше значение z, тем дальше).

Microsoft устарела -ms-transform-origin , версия этого свойства с префиксом поставщика, с выпуском Internet Explorer 10.