| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 9.0 + | 10.0 + | 5.0 + | 10.5 + | 12.10 + | 3.1 + | 3.5 + | 16.0 + | 2.1 + | 2.0 + |
Коротка інформація
| Значення за умовчанням | 50% 50% 0 |
|---|---|
| Успадковується | Ні |
| Застосовується | До блоковим і рядковим елементів |
| Відсотковий запис | незастосовні |
| Посилання на специфікацію | http://dev.w3.org /csswg /css-transforms/#transform-origin |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює координати точки, щодо якої буде відбуватися трансформація елемента.
Синтаксис
transform-origin: <x> <y> <z>
Значення
- <x>
-
координата по осі X. Може приймати наступні значення:
<довжина> | <відсотки> | left | center | right
Тут <довжина> — будь-яка одиниця виміру CSS.
- <y>
-
Координата по осі Y. Може приймати наступні значення:
<довжина> | <відсотки> | top | center | bottom
- <z>
-
Координата по осі Z. Може здаватися тільки в будь-яких коректних одиницях для вимірювання довжини (виключаючи відсотки).
Осі і значення показані на рис. 1.
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
transform-origin </title>
<style>
div {background: #fc0; padding: 10px; display: inline-block; border: 1px solid #000; } Div: hover { /* Точка повороту в правому верхньому кутку */ -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; /* Повертаємо на 20 градусів проти годинникової стрілки */ -webkit-transform: rotate (-20deg); -moz-transform: rotate (-20deg); -o-transform: rotate (-20deg); -ms-transform: rotate (-20deg); transform: rotate (-20deg); } </style>
</head>
<body>
<div>
Приклад </div>
</body>
</html>
В даному прикладі при наведенні курсору на елемент він повертається на 20 градусів проти годинникової стрілки щодо правого верхнього кута.
Об'єктна модель
[window.] document.getElementById (" elementID "). style.transformOrigin
Браузери
Internet Explorer 9 підтримує нестандартне властивість - ms-transform-origin .
Chrome, Safari, Android і iOS підтримують нестандартне властивість - webkit-transform - origin .
Opera до версії 12.10 підтримує нестандартне властивість - o -transform -origin .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-transform - origin .