Свойство transform-origin

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


10.0+	5.0+	12.1+	3.1+	16.0+	2.1+	2.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	+

Для чего используется?

Сообщает системе координаты главной точки, которая является центром трансформации и относительно которой происходят все составляющие превращения.

Как правильно задавать?

transform-origin: координаты точки в трех измерениях;

Какие могут быть значения?

Координата X - высчитывается через единицы измерения длины и проценты, а также может задаваться командами left, center или right.
Координата Y - высчитывается через единицы измерения длины и проценты, а также может задаваться командами top, center или bottom.
Координата Z - значение этой координаты определяется только единицами измерения длины.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство transform</title>
  <style>
   img:hover {
    transform: rotate(15deg);
    transform-origin: 225px 0px 145px;
   }
  </style>
 </head>
 <body>
  <img src="android.jpg">
 </body>
</html>

Тип CSS свойства:

Форматирование