CSS3 Свойство transform-origin
Полный CSS Справочник
Пример
Установить базовое расположение повернутых элементов:
div
{
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 */
} |
Попробуйте сами » |
Поддержка Браузерами
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.
Значение по умолчанию: |
50% 50% 0 |
Наследуется: |
нет |
Версия: |
CSS3 |
JavaScript синтаксис: |
объект.style.transformOrigin="20% 40%" |
Синтаксис
transform-origin: x-ось y-ось z-ось; |
Значение Свойства |
Описание |
x-ось |
Определяет расположение по оси x. Возможные значения:
- left
- center
- right
- расстояние
- %
|
y-ось |
Определяет расположение по оси y. Возможные значения:
- top
- center
- bottom
- расстояние
- %
|
z-ось |
Определяет расположение по оси z. Возможные значения:
|
Полный CSS Справочник
|