CSS приклад: transform-origin

Тег transform-origin в CSS і його застосування

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+

Коротка інформація

Властивість CSS transform-origin встановлює координати точки, щодо якої відбувається трансформація елемента.

Синтаксис

transform-origin: <x> <y> <z>

Значення

<x>
Координата по осі X.
<y>
Координата по осі Y.
<z>
Координата по осі Z.

Приклад

При наведенні курсора на елемент він повертається на 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.

Часті запитання

  • Q: Як використовувати transform-origin в CSS?

    A: transform-origin в CSS використовується для визначення точки, навколо якої відбувається трансформація елемента.

  • Q: Де можна застосувати transform-origin?

    A: transform-origin можна використовувати в різних CSS властивостях, таких як transform, transition, animation тощо.

  • Q: Як змінити точку трансформації за допомогою transform-origin?

    A: За допомогою transform-origin можна змінювати положення точки трансформації відносно елемента.

  • Q: Чи можна використовувати від'ємні значення для transform-origin?

    A: Так, можна використовувати від'ємні значення для transform-origin для зміни положення точки трансформації в зворотному напрямку.

  • Q: Як використовувати transform-origin в поєднанні з іншими CSS трансформаціями?

    A: transform-origin можна комбінувати з іншими CSS трансформаціями, щоб домогтися бажаного ефекту при рухах та трансформаціях елементів.