transform-origin
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. Возможные значения:
|
| ось Y |
Указывает изменения позиции на оси Y. Возможные значения:
|
| ось 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 */
}
