Список альтернативных свойств для браузеров:
- Internet Explorer - "-ms-transform-origin" (только для 2D преобразований)
- Firefox - "-moz-transform-origin" (только для 2D преобразований)
- Opera - "-o-transform-origin" (только для 2D преобразований)
- Safari и Chrome - "-webkit-transform-origin" (для 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. Возможные значения:
|
Пример
html
head
style type="text/css"
#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 */
}
/style
/head
body
div id="div1"
div id="div2"HELLO/div
/div
/body
/html
|