transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨setembro de 2015⁩.

A propriedadetransform-origin define a origem das transformações de um elemento noCSS.

Experimente

transform-origin: center;

transform-origin: top left;

transform-origin: 50px 50px;

/* 3D rotation with z-axis origin */transform-origin: bottom right 60px;

<section>  <div>    <div>Rotate me!</div>    <img      alt=""           src="/shared-assets/images/examples/crosshair.svg"      width="24px" />    <div></div>  </div></section>

@keyframes rotate {  from {    transform: rotate(0);  }  to {    transform: rotate(30deg);  }}@keyframes rotate3d {  from {    transform: rotate3d(0);  }  to {    transform: rotate3d(1, 2, 0, 60deg);  }}#example-container {  width: 160px;  height: 160px;  position: relative;}#example-element {  width: 100%;  height: 100%;  display: flex;  position: absolute;  align-items: center;  justify-content: center;  background: #f7ebee;  color: #000000;  font-size: 1.2rem;  text-transform: uppercase;}#example-element.rotate {  animation: rotate 1s forwards;}#example-element.rotate3d {  animation: rotate3d 1s forwards;}#crosshair {  width: 24px;  height: 24px;  opacity: 0;  position: absolute;}#static-element {  width: 100%;  height: 100%;  position: absolute;  border: dotted 3px #ff1100;}

"use strict";window.addEventListener("load", () => {  function update() {    const selected = document.querySelector(".selected");    /* Restart the animation           https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */    el.className = "";    window.requestAnimationFrame(() => {      window.requestAnimationFrame(() => {        el.className =          el.style.transformOrigin.split(" ")[2] === "60px"            ? "rotate3d"            : "rotate";      });    });    const transformOrigin = getComputedStyle(el).transformOrigin;    const pos = transformOrigin.split(/\s+/);    crosshair.style.left = `calc(${pos[0]} - 12px)`;    crosshair.style.top = `calc(${pos[1]} - 12px)`;  }  const crosshair = document.getElementById("crosshair");  const el = document.getElementById("example-element");  const observer = new MutationObserver(() => {    update();  });  observer.observe(el, {    attributes: true,    attributeFilter: ["style"],  });  update();  crosshair.style.opacity = "1";});

A origem da transformação é o ponto em torno do qual uma transformação é aplicada. Por exemplo, a origem da transformação da funçãorotate() é o centro de rotação.

Na prática, essa propriedade envolve um par de translações em torno das outras transformações do elemento. A primeira translação move a origem da transformação para a origem real em $(0, 0)$ . Em seguida, as outras transformações são aplicadas e, porque a origem da transformação está em $(0, 0)$ , essas transformações atuam em relação à origem da transformação. Por fim, a translação oposta é aplicada, movendo a origem da transformação de volta à sua localização original. Consequentemente, essa definição

css

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

resulta na mesma transformação que

css

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

Lendo da direita para a esquerda,translate(100%, -50%) é a tradução para trazer a origem da transformação para a origem real,rotate(45deg) é a transformação original etranslate(-100%, 50%) é a tradução para restaurar a origem da transformação à sua localização original.

Por padrão, a origem de uma transformação écenter (centro).

Sintaxe

css

/* 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;

A propriedadetransform-origin pode ser especificada usando um, dois ou três valores, onde cada valor representa um deslocamento. Deslocamentos que não são definidos explicitamente são redefinidos para seus respectivosvalores iniciais.

Se um único valor<length> ou<percentage> for definido, ele representa o deslocamento horizontal.

Se dois ou mais valores forem definidos e nenhum deles for uma palavra-chave, ou a única palavra-chave utilizada forcenter, então o primeiro valor representa o deslocamento horizontal e o segundo representa o deslocamento vertical.

Sintaxe de um valor:
- O valor deve ser um<length>, um<percentage>, ou uma das palavras-chaveleft,center,right,top ebottom.
Sintaxe de dois valores:
- Um valor deve ser um<length>, um<percentage>, ou uma das palavras-chaveleft,center eright.
- O outro valor deve ser um<length>, um<percentage>, ou uma das palavras-chavetop,center ebottom.
Sintaxe de três valores:
- Os dois primeiros valores são os mesmos da sintaxe de dois valores.
- O terceiro valor deve ser um<length>. Ele representa sempre o deslocamento Z.

Valores

x-offset: É um<length> ou um<percentage> que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.
offset-keyword: É uma das palavras-chaveleft,right,top,bottom oucenter que descreve o deslocamento correspondente.
y-offset: É um<length> ou um<percentage> que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.
x-offset-keyword: É uma das palavras-chaveleft,right oucenter que descreve a distância a partir da borda esquerda da caixa onde a origem da transformação é definida.
y-offset-keyword: É uma das palavras-chavetop,bottom oucenter que descreve a distância a partir da borda superior da caixa onde a origem da transformação é definida.
z-offset: É um<length> (e nunca um<percentage> que tornaria a afirmação inválida) que descreve a distância do olho do usuário onde a origem z=0 é definida.

As palavras-chave são atalhos convenientes e correspondem aos seguintes valores de<percentage>:

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

Definição formal

Initial value	`50% 50% 0`
Aplica-se a	qualquer elemento transformavel
Inherited	não
Percentages	refer to the size of bounding box
Computed value	for`<length>` the absolute value, otherwise a percentage
Animation type	simple list of length, percentage, or calc

Nota:O valor inicial detransform-origin é0 0 para todos os elementos SVG, exceto para elementos<svg> raiz e elementos<svg> que são filhos diretos de um elementoforeignObject, cujotransform-origin é50% 50%, assim como outros elementos CSS. Consulte o atributotransform-origin do SVG para obter mais informações.

Sintaxe formal

transform-origin =
[left|center|right|top|bottom|<length-percentage>]|
[left|center|right|<length-percentage>][top|center|bottom|<length-percentage>]<length>?|
[[center|left|right]&&[center|top|bottom]]<length>?

<length-percentage> =
<length>|
<percentage>

Exemplos

Uma demonstração de vários valores de transformação

Este exemplo mostra o efeito de escolher diferentes valores detransform-origin para uma variedade de funções de transformação.

<div>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: none;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: rotate(30deg);  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: rotate(30deg);transform-origin: 0 0;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: rotate(30deg);transform-origin: 100% 100%;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: rotate(30deg);transform-origin: -1em -3em;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: scale(1.7);  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: scale(1.7);transform-origin: 0 0;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: scale(1.7);transform-origin: 100% -30%;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</div>  </div>  <pre>transform: skewX(50deg);transform-origin: 100% -30%;  </pre>  <div>    <div>&nbsp;</div>    <div>&nbsp;</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%;}

Especificações

Specification
CSS Transforms Module Level 1 # transform-origin-property

Compatibilidade com navegadorres

Veja também

Help improve MDN

Learn how to contribute

This page was last modified on⁨1 de jan. de 1970⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

transform-origin

Help improve MDN