преобразование происхождения | Коддропс
Свойство 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, Сара Суэйдан.