transform-origin
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 36.0+ | 23.0+ | 9.0+ |
Описание
CSS свойство transform-origin устанавливает исходную точку преобразования элемента. По умолчанию для свойства transform-origin используется значение 50% 50% 0, представляющее собой центр элемента. Первое значение указывает X координату, или смещение влево или право, второе значение указывает Y координату, или смещение вверх или вниз, эти значения вычисляются от верхнего левого угла элемента. Третье значение задает смещение по оси Z, имеющее смысл при 3D-преобразованиях.
Свойство transform-origin используется вместе со свойством transform.
| Значение по умолчанию: | 50% 50% 0 |
|---|---|
| Применяется: | к трансформируемым элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transformOrigin="20% 40%" |
Синтаксис
transform-origin: ось_X ось_Y ось_Z|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| ось_X | Указывает изменения позиции на оси X. Возможные значения:
|
| ось_Y | Указывает изменения позиции на оси Y. Возможные значения:
|
| ось_Z | Указывает изменения позиции на оси Y. Возможные значения:
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
#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%;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
Результат данного примера в окне браузера:
