Свойство transform-origin

Последнее обновление: 22.04.2011

Свойство transform-origin — задает координаты центра трансформации.

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

Допустимые значения

  • <значение> — абсолютное значение расстояния от левого верхнего угла элемента в плоскости z=0 до координат центра трансформации. Координату z можно задать только абсолютной величиной
  • <процент> — расстояние от левого верхнего угла элемента до координаты центра трансформации в процентах от размера элемента (координата по оси x вычисляется в процентах от ширины элемента, а координата по оси y — от высоты)
  • left — координата по оси x равна 0 (трансформация по оси x происходит относительно левой стороны элемента)
  • right— координата по оси x равна 100% или ширине элемента (трансформация по оси x происходит относительно правой стороны элемента)
  • top— координата по оси y равна 0 (трансформация по оси y происходит относительно верхней стороны элемента)
  • bottom — координата по оси y равна 100% (трансформация по оси y происходит относительно нижней стороны элемента)
  • center — координата по оси x равна 50% (трансформация по оси x происходит относительно центра элемента). Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси x равную 50%. Если эти константы отсутствуют, задает значение равное 50% по обеим осям
Значение по умолчанию 50% 50% 0
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

div {
width:100px;
height:50px;
transform:rotate(45deg) skewX(15deg) scale(1.5, 3);
transform-origin:10% right;
}
Твой код:
Результат:
большой полигон

Заметки

Safari 3.1 и выше Chrome 1 и выше поддерживают похожее свойство -webkit-transform-origin, Opera 10.5 и выше поддерживает похожее свойство -o-transform-origin, Firefox 3.5 и выше -moz-transform-origin, а IE9 и выше -ms-transform-origin, но все они не поддерживают возможность задать координату z.

По теме

Показать комментарии