Перечень кроссбраузерных свойств: - 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: | object.style.transformOrigin="20% 40%" | | Значение | Описание | | ось X | Указывает смещение по горизонтали. Возможные варианты:
- left
- center
- right
- расстояние
- %
| | ось Y | Указывает смещение по вертикали. Возможные варианты:
- top
- center
- bottom
- расстояние
- %
| | ось Z | Указывает смещение по глубине. Возможные варианты:
| Примерhtmlhead 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/headbody div id="div1" div id="div2"HELLO/div /div/body/html
|