Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-transform-origin
смотрим также
-
События Таганрога: Банк Прохорова взыщет с разорившегося туроператора 200 миллионов рублей.
Материал из Справочник Web-языков
Содержание |
Свойство -moz-transform-origin
Используется при определении точки отсчета для применения трансформации к элементу. Например, при повороте rotate по умолчанию точкой отсчета будет центр элемента.
Синтаксис
-moz-transform-origin: [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ?
-moz-transform-origin: [ left | center | right ] || [ top | center | bottom ]
Используемые значения
- Если задано одно значение, то оно задает горизонтальную координату точки отсчета, а вертикальной координате по умолчанию задается значение 50%.
- Если задано два значения, то первое - для горизонтальной координаты, второе - для вертикальной.
Поддерживаются комбинации из ключевых слов (указаны ниже), значений длины и процентов. Если ключевые слова используются в сочетании с другими значениями, то left и right могут использоваться только как первое значение (для горизонтальной координаты), а top и bottom - как второе значение (для вертикальной координаты). Поддерживаются отрицательные значения.
- <percentage>
- Если задана пара значений 0% 0% или просто 0 0, то точкой отсчета выбирается левый верхний угол элемента. Если задана пара значений 100% 100%, то точкой отсчета выбирается правый нижний угол. А, например, с парой значений 14% 84%, отсчет для трансформации начнется от точки 14% вправо и 84% вниз от левого верхнего угла элемента.
- <length>
- Если задана пара значений, например, 2cm 1cm, то точка начала трансформации будет находиться на 1 сантиметр правее и на 2 сантиметра ниже левого верхнего угла элемента.
- top left | left top
- Тоже самое, что и 0 0.
- top | top center | center top
- Тоже самое, что и 50% 0.
- right top | top right
- Тоже самое, что и 100% 0.
- left | left center | center left
- Тоже самое, что и 0 50%.
- center | center center
- Значение по умолчанию. Тоже самое, что и 50% 50%.
- right | right center | center right
- Тоже самое, что и 100% 50%.
- bottom left | left bottom
- Тоже самое, что и 0 100%.
- bottom | bottom center | center bottom
- Тоже самое, что и 50% 100%.
- bottom right | right bottom
- Тоже самое, что и 100% 100%.
Значением по умолчанию является 50% 50%. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Свойство -moz-transform-origin применяется ко всем блочным и встроенным элементам.
Примеры
В примере показано как описать свойство -moz-transform-origin:
-moz-transform: rotate(30deg); -moz-transform-origin: 0 0;
Используя браузер Mozilla Firefox (Gecko) 3.5 (1.9.1) посмотрите Примеры (Live examples).
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 3.5 (1.9.1) - для свойства -moz-transform-origin.
Opera начиная с версии 10.5 - для свойства -o-transform-origin.
Safari (WebKit) начиная с версии 3.1 (525) - для свойства -webkit-transform-origin.
Стандарты
CSS3 2D Transforms #transform-origin