СSS Свойство transform-origin
Пример
Установка базового размещения повернутого элемента:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Редактор кода »
Определение и использование
Свойство transform-origin позволяет изменять положение преобразованных элементов.
2D преобразования могут изменять оси x и y элемента. 3D преобразования также могут изменять ось z элемента.
Чтобы лучше понять свойство the transform-origin property,
просмотр демо-версии.
Примечание: Это свойство должно использоваться вместе с свойством transform.
Совет: Чтобы лучше понять свойство, это свойство для 3D трансформация, просмотр демо-версии.
| Значение по умолчанию: | 50% 50% 0 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да Прочитайте о animatable Попробовать |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.transformOrigin="0 0" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -moz-, or -o- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS Синтаксис
transform-origin: x-axis y-axis z-axis|initial|inherit;
Значение свойств
| Значение | Описание |
|---|---|
| x-axis | Определяет, где вид размещается на оси X. Возможное значение:
|
| y-axis | Определяет, где вид размещается на оси Y. Возможное значение:
|
| z-axis | Определяет, где вид размещается на оси z (для 3D преобразований). Возможное значение:
|
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Связанные страницы
CSS Учебник: CSS 2D Трансформация
CSS Учебник: CSS 3D Трансформация
HTML DOM Справочник: Свойство transformOrigin
