Мне кажется, что статья местами непонятна (слишком объемное свойство). Если вы не понимаете некоторые описанные вещи - напишите мне, я постараюсь описать их более понятно (контакты внизу страницы).

Свойство transform-origin задает точку, относительно которой будут происходить трансформации элемента, задаваемые свойством transform.

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

Синтаксис

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию).

Сдвиг точки по оси Z нужен для 3D трансформаций (см. видео ниже).

селектор {
	transform-origin: X-ось Y-ось Z-ось | inherit;
}
селектор {
	Значения Y-ось: left | center | right | CSS единицы | %;
}
селектор {
	Значения для Y-ось: top | center | bottom | CSS единицы | %;
}
селектор {
	Значения для Z-ось: CSS единицы | %;
}

Значения по горизонтали (ось X)

Значение Описание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от левой границы элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное - влево (снаружу элемента) относительно левой границы элемента.
Проценты Центр трансформации отступает от левой границы элемента на процент от ширины элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное - влево (снаружу элемента) относительно левой границы элемента.
left Точка вращения по горизонтали на левой границе элемента (где именно - задает значение по оси Y).
right Точка вращения по горизонтали на правой границе элемента.
center Точка вращения по горизонтали в центре элемента.

Значения по вертикали (ось Y)

Значение Описание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от верхней границы элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное - вверх (снаружу элемента) относительно верхней границы элемента.
Проценты Центр трансформации отступает от верхней границы элемента на процент от высоты элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное - вверх (снаружу элемента) относительно верхней границы элемента.
top Точка вращения по вертикали на верхней границе элемента (где именно - задает значение по оси X).
bottom Точка вращения по вертикали на нижней границе элемента.
center Точка вращения по вертикали в центре элемента.

Значения по оси Z

Значение Описание
CSS единицы Значение в заданных CSS единицах, которое задает отступ центра трансформации от плоскости элемента. Положительное значение сдвигает его на нас (от плоскости экрана), а отрицательное от нас (не проверено).
Проценты Центр трансформации отступает на заданный процент (от чего?).

Значение по умолчанию: center center 0px.

Значение inherit - наследует значение родителя.

Примеры

Пример

Наведите мышкой на пример - блок повернется на 30 градусов по часовой стрелке относительно своего центра:

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!

Пример

А теперь при наведении блок повернется относительно верхнего левого угла:

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	transform-origin: 0px 0px;
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!

Пример

А теперь при наведении блок повернется относительно правого нижнего угла. Для этого следует отнести точку трансформации на 100% вправо и на 100% вниз (можно было бы задать и px, но при изменении размеров элемента точка трансформации осталась бы на месте, поэтому лучше делать в %):

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	transform-origin: 100% 100%;
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!

Пример

Повернем блок относительно правого верхнего угла:

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	transform-origin: 100% 0%;
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!

Пример

Повернем блок относительно центра левой стороны. Для этого для оси X зададим "left" (точка вращения будет слева), а для оси Y - "center" (точка вращения будет по центру по вертикали):

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	transform-origin: left center;
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!

Пример

Свойство можно задавать не только для вращения, но и для других трансформаций. Давайте увеличим масштаб с помощью scale, при этом точка транформации будет в различных местах (пример кода написан для точки слева по центру):

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
p:hover {
	transform-origin: left center;
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

left center

center center

right center

нижний правый угол

нижний левый угол

Пример

Наведите мышкой на пример - блок повернется на 30 градусов по часовой стрелке относительно центра транформации, который находится на 50% от ширины элемента (это значит 100px*50%=50px) слева от его левой границы (так как задано отрицательное значение). По вертикали центр трансформации находится по центру элемента, так как задано значение center. В примере задано свойство transition, чтобы сделать плавный поворот:

p {
	border: 1px solid black;
	width: 100px;
	height: 50px;
	-moz-transition: transform 1s;
	-webkit-transition: transform 1s;
	transition: transform 1s;
	transform-origin: -50% center;
}
p:hover {
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

Привет, мир!