CSS3 transform-origin Property

пример

Набор размещения базового повернутой элемента:

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

Попробуй сам "

Определение и использование

Свойство преобразовании происхождения позволяет изменить положение трансформированных элементов.

2D преобразования могут изменить Х- и ось элемента. 3D преобразования могут также изменить Z-ось элемента.

Для того, чтобы лучше понять свойства преобразования-происхождения, просмотреть демонстрацию .

Note: Это свойство должно быть использовано вместе с преобразованием собственности.

Tip: Для того, чтобы лучше понять это свойство для 3D - преобразования, просмотреть демонстрацию .

Значение по умолчанию:	50% 50% 0
Наследование:	no
Animatable:	yes. Read about animatable Try it
Версия:	CSS3
Синтаксис JavaScript:	object .style.transformOrigin="0 0" Try it

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

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа следуют -webkit-, -moz- или -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 -о-
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	Определяет, где вид находится на оси х. Возможные значения: оставил центр правильно length %
y-axis	Определяет, где вид находится на оси у. Возможные значения: Вверх центр дно length %
z-axis	Определяет , где вид помещается на оси (for 3D transformations) - (for 3D transformations) . Возможные значения: length
начальная	Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный
унаследовать	Наследует это свойство от своего родительского элемента. Читайте о унаследовать

CSS Справка