Tengo una reproducción del problema al que me enfrento a continuación:
.rect { transform: rotateZ(45deg); background-color: #ddd; position: absolute; width: 300px; height: 200px; animation: 3s linear 0s infinite normal none running widen; } @keyframes widen { from { width: 300px; } to { width: 500px; } } <div class="rect"></div>Observe cómo a medida que el rectángulo se ensancha, su posición también cambia. Es cierto que la posición programática del elemento no cambia, pero visualmente en la pantalla parece que sí.
Solo busco ensancharlo sin que parezca que se mueve visualmente. Es decir, el lado derecho del rectángulo simplemente debe extruir 200 píxeles adicionales. es posible?
Mirando a mi alrededor, parece que establecer el transform-origin desde el center hacia top left logra este efecto, pero desafortunadamente el origen de rotación de mi rectángulo está alrededor de su centro. Quizás la solución sea configurarlo temporalmente de alguna manera mientras se produce el efecto.
Una manera fácil de hacer esto es envolver el div del rectángulo gris en otro div que haga la rotación . De esa manera, el ancho y la rotación se pueden controlar de forma independiente.
Si también es necesario aplicar otras transformaciones, este enfoque le brinda control sobre el orden en que se aplicarán las transformaciones.
.rect { transform: rotateZ(45deg); } .widen { background-color: #ddd; width: 300px; height: 200px; animation: 3s linear 0s infinite normal none running widen; } @keyframes widen { from { width: 300px; } to { width: 500px; } } <div class="rect"> <div class="widen" /> </div>Se espera ese efecto de aplastamiento, pero para este escenario, sugeriría no animar las propiedades de tamaño de todos modos, ya que impulsará su flujo DOM natural si hay otros elementos. En su lugar, intente transformar scale , vea a continuación.
.rect { transform: rotate(45deg); background-color: #ddd; position: absolute; width: 300px; height: 200px; transform-origin: center left; animation: 3s linear widen infinite; } /* @keyframes widen { from { width: 300px; } to { width: 500px; } } */ @keyframes widen { to { transform: rotate(45deg) scaleX(2); } <div class="rect"></div>Parece que se mueve debido al ángulo. Si desea que crezca proporcionalmente, agregue altura a la animación.
Ejemplo 1:
.rect { transform: rotateZ(45deg); background-color: #ddd; position: relative; width: 300px; height: 200px; animation: 3s linear 0s infinite normal none running widen; } @keyframes widen { from { width: 300px; height: 200px; } to { width: 500px; height: 400px; } } <div class="rect"></div>Si eliminamos la rotación, no parecerá que se está moviendo.
Ejemplo 2:
.rect { background-color: #ddd; position: relative; width: 300px; height: 200px; animation: 3s linear 0s infinite normal none running widen; } @keyframes widen { from { width: 300px; } to { width: 500px; } } <div class="rect"></div>