Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Свойство transform-origin


CSS Справочник Полный 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 Firefox Opera Google Chrome Safari

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 Справочник Полный CSS Справочник

© 2011-2017 Уроки CSS
Рейтинг@Mail.ru