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 .