Печать

transform-origin

Автор: Алексей Елизаров.

View Comments

CSS свойство transform-origin

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

Список альтернативных свойств для браузеров:

  • Internet Explorer - "-ms-transform" (только для 2D преобразований)
  • Firefox - "-moz-transform" (только для 2D преобразований)
  • Opera - "-o-transform" (только для 2D преобразований)
  • Safari и Chrome - "-webkit-transform" (для 2D и 3D преобразований)

Описание

Свойство transform-origin позволяет изменить позицию преобразованных элементов. Для элементов с 2D преобразованием можно изменять ось X и Y, для 3D преобразования можно изменять также ось Z.

Свойство transform-origin используется вместе со свойством transform.
 

Значение по умолчанию: 50% 50% 0
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transformOrigin="20% 40%"

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

Значение Описание
ось X Указывает изменения позиции на оси X. Возможные значения:
  • left
  • center
  • right
  • расстояние
  • %
ось Y Указывает изменения позиции на оси Y. Возможные значения:
  • top
  • center
  • bottom
  • расстояние
  • %
ось Z Указывает изменения позиции на оси Y. Возможные значения:
  • расстояние
 

#div1{
position: relative;
height: 200px;
width: 200px;
margin: 30px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari и Chrome */
-webkit-transform-origin:20% 40%; /* Safari и Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}