Встановлює координати точки, щодо якої відбуватиметься трансформація елемента.
| Значення за замовчуванням | 50% 50% 0 |
|---|---|
| Наслідує | Ні |
| Застосовується | До трансформованих елементів |
| Анімується | Так |
<code>transform-origin: <x> <y> <z>
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Координата по осі X. Може приймати такі значення:
<розмір> | <відсотки> | left | центр | right
Тут <розмір> — будь-яка одиниця виміру CSS.
Координата по осі Y. Може приймати такі значення:
<розмір> | <відсотки> | top | центр | bottom
Координата по осі Z. Може задаватися тільки в будь-яких коректних одиницях для вимірювання довжини (за винятком відсотків).
Осі та значення показані на рис. 1.
Мал. 1. Осі під час трансформації елемента
Відлік координат ведеться від лівого верхнього кута елемента, за замовчуванням точка трансформації знаходиться в його центрі, як показано на малюнку вище. При використанні відсотків вони беруться від розмірів елемента.
< !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; transition: 1s; transform-origin: 100% 0; /* Точка повороту в правому верхньому куті */
}
div:hover { /* Повертаємо на 20 градусів проти годинникової стрілки */
transform: rotate(-20deg); }
</style>
</head>
<body> <div>Приклад</div>
</body>
</html>У цьому прикладі при наведенні курсору на елемент він повертається на 20 градусів проти годинникової стрілки щодо правого верхнього кута.
Об'єкт.style.transformOrigin
Internet Explorer 9 підтримує властивість -ms-transform-origin.
Chrome до версії 36, Safari до версії 9, Opera до версії 23 та Android підтримують властивість -webkit-transform-origin.
Opera до версії 12.1 та з версії 15 до 23 підтримує властивість -o-transform-origin.
Firefox до версії 16 підтримує властивість -moz-transform-origin.
| Специфікація | Статус |
|---|---|
| CSS Transforms Module Level 1 | Робочий проект |
Кожна специфікація проходить кілька стадій схвалення.
| 9 | 10 | 12 | 5 | 36 | 11.5 | 12.1 | 15 | 23 | 4 | 9 | 3.5 | 16 |
| 2.1 | 3.5 | 16 | 12 | 4 | 9.2 |
У таблиці браузерів застосовуються такі позначення.
Число вказує версію браузера , з якої властивість підтримується.