Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Свойство transform-style в CSS3 Свойство transform в CSS3

Метод использования и примеры CSS3 transform-origin

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

Элементы 2D-трансформации могут изменять элементы по осям X и Y. Элементы 3D-трансформации могут также изменять элемент по оси Z.　

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

Значение по умолчанию:	50% 50% 0
Подходит для:	Элементы, поддающиеся трансформации
Наследование:	Нет
Анимировано:	Да.См. также Анимационные свойства。
Версия:	Новая функция CSS3
JavaScript грамматика:	объект.style.transformOrigin="20@%"

Грамматика использования transform-origin

Грамматика этого свойства такая:

transform-origin: x-position | y-position | z-position | initial | inherit

Примечание:Если для атрибута transform-origin указан только один значений, то предполагается, что второе значение равно center, что равно значению 50%.

Ниже приведен пример того, как использовать атрибут transform-origin.

Пример

img {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin: 25% bottom;
　　　　/* Firefox */
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin: 25% bottom;
　　　　/* IE 9 */
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin: 25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin: 25% bottom;
}

Проверьте, посмотрите < / >

Примечание:Если по крайней мере один из двух значений не является ключевым словом, первое значение представляет горизонтальное положение (или смещение) точки origins трансформации, второе значение представляет вертикальное положение (или смещение) точки origins трансформации.

Значения свойств

Таблица ниже описывает значения этого свойства.

значение	описание
x-position	presents the horizontal position (or offset) of the transformation origin. It can have one of the following values: percentage - определяет смещение относительно ширины элемента. length - определяет смещение используемого значения длины. left - равно 0% или нулевой ширине. center - равно 50% ширины блока или его половине. right - равно 100% или полной ширине блока.
y-position	пresents the vertical position (or offset) of the transformation origin. It can have one of the following values: percentage - определяет смещение относительно высоты элемента. length - определяет смещение используемого значения длины. top - равно 0% или нулевой высоте. center - равно 50% высоты блока или его половине. bottom - равно 100% или полной высоте блока.
z-position	одинlengthзначение, которое описывает, насколько далеко от глаза пользователя находится точка Z=0 (для3D-трансформации）。Процентные значения недопустимы.
initial	Установить это свойство в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства transform-origin родительского элемента.

Совместимость браузеров

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

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+

Дополнительное чтение

См. также следующие руководства:CSS3 2D-трансформации，CSS3 3D-трансформации

См. также свойства:backface-visibility，perspective，perspective-origin，transform，transform-style。

Свойство transform-style в CSS3 Свойство transform в CSS3