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 */
}
