Главная » Языки программирования

transform-origin

На чтение 9 мин
Содержание
  1. transform-origin
  2. Try it
  3. Syntax
  4. Values
  5. Formal definition
  6. Formal syntax
  7. Examples
  8. A demonstration of various transform values
  9. Specifications
  10. Browser compatibility
  11. See also
  12. transform-origin
  13. Синтаксис
  14. Значения
  15. Пример
  16. Объектная модель
  17. Браузеры
  18. CSS по теме
  19. transform — origin
  20. Кратко
  21. Пример
  22. Как понять
  23. Как пишется
  24. Подсказки
  25. На практике
  26. Денис Ежков советует

transform-origin

The transform-origin CSS property sets the origin for an element’s transformations.

Try it

The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.

In effect, this property wraps a pair of translations around the element’s other transformations. The first translation moves the transform origin to the true origin at ( 0 , 0 ) . Then the other transformations are applied, and because the transform origin is at ( 0 , 0 ) , those transformations act about the transform origin. Finally, the opposite translation is applied, moving the transform origin back to its original location. Consequently, this definition

transform-origin: -100% 50%; transform: rotate(45deg);

results in the same transformation as

transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Reading from right to left, translate(100%, -50%) is the translation to bring the transform origin to the true origin, rotate(45deg) is the original transformation, and translate(-100%, 50%) is the translation to restore the transform origin to its original location.

By default, the origin of a transform is center .

Syntax

/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* Global values */ transform-origin: inherit; transform-origin: initial; transform-origin: revert; transform-origin: revert-layer; transform-origin: unset;

The transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If two or more values are defined and either no value is a keyword, or the only used keyword is center , then the first value represents the horizontal offset and the second represents the vertical offset.

Values

Is one of the left , right , top , bottom , or center keyword describing the corresponding offset.

Is one of the left , right , or center keyword describing how far from the left edge of the box the origin of the transform is set.

Читайте также:  Python request status code

Is one of the top , bottom , or center keyword describing how far from the top edge of the box the origin of the transform is set.

The keywords are convenience shorthands and match the following values:

Keyword Value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formal definition

Note: The initial value of transform-origin is 0 0 for all SVG elements except for root elements and elements that are a direct child of a foreignObject, and whose transform-origin is 50% 50% , like other CSS elements. See the SVG transform-origin attribute for more information.

Formal syntax

transform-origin =
[ left | center | right | top | bottom | ] |
[ left | center | right | ] [ top | center | bottom | ] ? |
[ [ center | left | right ] && [ center | top | bottom ] ] ?

=
|

Examples

A demonstration of various transform values

This example shows the effect of choosing different transform-origin values for a variety of transformation functions.

div class="container"> div class="example"> div class="box box1"> div> div class="box original"> div> div> pre> transform: none; pre> div class="example"> div class="box box2"> div> div class="box original"> div> div> pre> transform: rotate(30deg); pre> div class="example"> div class="box box3"> div> div class="box original"> div> div> pre> transform: rotate(30deg); transform-origin: 0 0; pre> div class="example"> div class="box box4"> div> div class="box original"> div> div> pre> transform: rotate(30deg); transform-origin: 100% 100%; pre> div class="example"> div class="box box5"> div> div class="box original"> div> div> pre> transform: rotate(30deg); transform-origin: -1em -3em; pre> div class="example"> div class="box box6"> div> div class="box original"> div> div> pre> transform: scale(1.7); pre> div class="example"> div class="box box7"> div> div class="box original"> div> div> pre> transform: scale(1.7); transform-origin: 0 0; pre> div class="example"> div class="box box8"> div> div class="box original"> div> div> pre> transform: scale(1.7); transform-origin: 100% -30%; pre> div class="example"> div class="box box9"> div> div class="box original"> div> div> pre> transform: skewX(50deg); transform-origin: 100% -30%; pre> div class="example"> div class="box box10"> div> div class="box original"> div> div> pre> transform: skewY(50deg); transform-origin: 100% -30%; pre> div> 
.container  display: grid; grid-template-columns: 200px 100px; gap: 20px; > .example  position: relative; margin: 0 2em 4em 5em; > .box  display: inline-block; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; > .original  position: absolute; left: 0; opacity: 20%; > .box1  transform: none; > .box2  transform: rotate(30deg); > .box3  transform: rotate(30deg); transform-origin: 0 0; > .box4  transform: rotate(30deg); transform-origin: 100% 100%; > .box5  transform: rotate(30deg); transform-origin: -1em -3em; > .box6  transform: scale(1.7); > .box7  transform: scale(1.7); transform-origin: 0 0; > .box8  transform: scale(1.7); transform-origin: 100% -30%; > .box9  transform: skewX(50deg); transform-origin: 100% -30%; > .box10  transform: skewY(50deg); transform-origin: 100% -30%; >

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник

transform-origin

Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

Синтаксис

Значения

Координата по оси X. Может принимать следующие значения:

Здесь — любая единица измерения CSS.

Координата по оси Y. Может принимать следующие значения:

Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).

Оси и значения показаны на рис. 1.

transform-origin

Рис. 1. Оси при трансформации элемента

Пример

HTML5 CSS3 IE Cr Op Sa Fx

       
Пример

В данном примере при наведении курсора на элемент он поворачивается на 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 .

CSS по теме

Источник

transform — origin

«Точка опоры» для применения трансформаций к элементу.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство задаёт положение точки, относительно которой применяются трансформации.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>      
 .element  transform-origin: 0 0; transform: rotate(-30deg);> .element  transform-origin: 0 0; transform: rotate(-30deg); >

Здесь элемент поворачивается относительно верхнего левого угла.

Как понять

Скопировать ссылку «Как понять» Скопировано

Некоторые трансформации выполняются относительно какой-то точки. Возьмём для примера поворот. По умолчанию он происходит относительно центра элемента. То есть в центре элемента есть некая неподвижная точка, вокруг которой происходит поворот. Но что, если мы хотим повернуть элемент не относительно центра, а относительно угла? То есть при повороте угловая точка элемента должна остаться неподвижной, а остальной элемент будет поворачиваться вокруг неё. В этом случае нам поможет свойство transform — origin . Оно задаёт координаты точки, относительно которой будет выполняться трансформация. В примере ниже мы задали для второго элемента координаты (0 , 0 ) . Это значит, что поворот выполнится вокруг левого верхнего угла элемента.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Способов записи несколько, но мы можем их комбинировать.

Можно записать одним числовым значением:

 .element  transform-origin: 5px;> .element  transform-origin: 5px; >

. или одним ключевым словом:

 .element  transform-origin: top;> .element  transform-origin: top; >

Можно использовать два значения:

 .element  transform-origin: 5px 10%; transform-origin: 3cm 2px; transform-origin: left 2px; transform-origin: right top; transform-origin: top right;> .element  transform-origin: 5px 10%; transform-origin: 3cm 2px; transform-origin: left 2px; transform-origin: right top; transform-origin: top right; >      
 .element  transform-origin: 2px 30% 10px; transform-origin: left 5px -3px; transform-origin: right bottom 2cm; transform-origin: bottom right 2cm;> .element  transform-origin: 2px 30% 10px; transform-origin: left 5px -3px; transform-origin: right bottom 2cm; transform-origin: bottom right 2cm; >

Если одно значение является числовым, то оно воспринимается, как смещение вдоль оси x. Например: transform — origin : 5px это то же самое, что и transform — origin : 5px center .

Если это ключевое слово center , то оно воспринимается, как два значения: transform — origin : center center , то есть точка трансформации устанавливается в центр элемента.

Если это другое ключевое слово ( top , left , right , bottom ), то в зависимости от значения точка трансформации смещается либо вдоль оси x, либо вдоль оси y: transform — origin : top это то же самое, что и transform — origin : center top .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Два значения задаются для осей x и y соответственно. Три значения — для x, y и z. Для осей x и y можно задавать ключевые слова: top , bottom , left , right , center . Для оси z можно задавать только числовые значения.

Не лишним будет напомнить, что в CSS начало осей x, y и z — это левый верхний угол элемента. Ось x направлена вправо, ось y направлена вниз, ось z — от плоскости экрана к пользователю.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 transform — origin эффективно работает не только при повороте. Плавное масштабирование тоже может давать разный эффект в зависимости от положения точки трансформации.

Источник

Оцените статью
© 2023 Программирование