tricks - transition transform css

Simulando el origen de la transformación usando la traducción.

Question

Quiero simular las propiedades de transform-origin usando transform: translate en CSS.

Según MDN , esto es muy posible:

Esta propiedad se aplica primero traduciendo el elemento por el valor negado de la propiedad, luego aplicando la transformación del elemento, luego traduciendo por el valor de la propiedad.

Sin embargo, cuando lo intento, obtengo resultados incorrectos. Estos dos rectángulos claramente no son lo mismo:

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

He intentado buscar la respuesta sin suerte desde hace bastante tiempo, y en mi opinión debería ser relativamente simple, simplemente no puedo entenderlo.

Answer 1

Eres casi bueno pero tienes dos errores. Necesita invertir las traducciones y necesita cambiar el transform-origin de transform-origin del segundo.

Si verifica la documentación, verá que la referencia utilizada para traducir el origen es la esquina superior izquierda del elemento y el valor predeterminado de origen de transformación es el center . Así que necesitamos tener la misma referencia para ambos.

.origin {
  transform-origin: 50px 50px;
  transform:  rotate(45deg) scale(2);
}
.translate {
  transform-origin:0 0; 
  transform:translate(50px, 50px) rotate(45deg) scale(2) translate(-50px, -50px);
} 
.box {
  background-color: red;
  width: 50px;
  height: 50px;
}
.container {
  display: inline-block;
  margin: 30px;
  width: 150px;
  height: 150px;
  background-color: rgba(0,0,0,0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>
<div class="container">
  <div class="box translate">
  </div>
</div>

Aquí es de la specification :

La matriz de transformación se calcula a partir de las propiedades de transformación y origen de transformación de la siguiente manera:

1. Comience con la matriz de identidad.

2. Traducción por la X e Y calculada de origen transformado.

3. Multiplica por cada una de las funciones de transformación en la propiedad de transformación de izquierda a derecha

4. Traducir por los valores X e Y calculados negados de origen de transformación

Tienes que prestar atención a la redacción! Puede encontrar que la MDN es contradictoria con la especificación, PERO no es así simplemente porque existe una diferencia entre traducir el elemento (como se describe en la MDN) y traducir el origen del elemento o la coordenada local (como se describe en la especificación ).

Por ejemplo, traducir el elemento por -50px es equivalente a traducir su coordenada local (origen) por + 50px.

También debe prestar atención a la opción "Multiplicar de izquierda a derecha", ya que puede crear confusión. Si nos referimos a la misma especificación en el Ejemplo 3 tenemos:

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

Esta transformación traduce el sistema de coordenadas local en 80 píxeles en las direcciones X e Y, luego aplica una escala del 150% y luego una rotación de 45 ° en el sentido de las agujas del reloj alrededor del eje Z. El impacto en la representación del elemento se puede interpretar como una aplicación de estas transformaciones en orden inverso : los elementos se rotan, luego se escalan y luego se traducen.

Entonces, multiplicar de izquierda a derecha no significa aplicar de izquierda a derecha, lo que de alguna manera explica la necesidad de invertir la traducción que aplicó para simular el transform-origin la transform-origin :

Answer 2

transform-origin no puede ser tan fácil de simular usando transform: translate . Al utilizar transform-origin de la transformación, cambia el centro de las transformaciones, de modo que las rotaciones y todas las demás transformaciones se calculan en función de diferentes puntos.

Vea el siguiente ejemplo de MDN con transform-origin: 50px,50px . El elemento girado está debajo del borde inferior del cuadrado punteado por un valor que no se puede calcular fácilmente. De seguro, podría simular transform-origin de transform: translate con la transform: translate por valores tendría que calcularse para una combinación particular de valores.