При работе с CSS-трансформациями важно учитывать особенности поддержки разных браузеров. Вот перечень альтернативных префиксов, которые стоит иметь в виду: - 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 - это настоящий инструмент контроля, позволяющий точно определять точку вращения или масштабирования элементов. В случае с двухмерными объектами вы можете свободно манипулировать осями X и Y, а при работе в трехмерном пространстве к этим значениям добавляется возможность изменения позиции по оси Z. Обратите внимание: данное свойство всегда работает в связке со свойством transform. | Значение по умолчанию: | 50% 50% 0 |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS3 |
|---|
| Синтаксис JavaScript: | object.style.transformOrigin="20% 40%" |
|---|
| Значение | Описание |
|---|
| ось X | Определяет смещение позиции вдоль оси X. Допустимые значения:- left
- center
- right
- расстояние
- %
| | ось Y | Определяет смещение позиции вдоль оси Y. Допустимые значения:- top
- center
- bottom
- расстояние
- %
| | ось Z | Определяет смещение позиции. Допустимые значения: |
Пример 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
|