Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство transform-origin

Дата:8.10.15 в 18:55
Справочник: 

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

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

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>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: