Esta es una continuación de mi pregunta anterior .

Digamos que tenemos el siguiente código:

 .rect { transform: rotateZ(45deg); width: 200px; height: 100px; resize: auto; overflow: hidden; background-color: #ddd; }

 <div class="rect"></div>

Observe cómo cuando cambia el tamaño del elemento, el div también parece moverse. Esto se debe a que está rotado. Si elimina la cantidad de rotación, el cambio de tamaño funciona normalmente y puede hacerlo más ancho y más alto sin que el elemento parezca moverse.

No creo que transform-origin: top left sea la solución, porque mi rectángulo de hecho gira alrededor de su centro para los propósitos de mi aplicación.

No estoy seguro de si funcionará un div contenedor. Parece que tiene potencial, pero no estoy seguro de cómo manejar el hecho de que ahora hay dos anchos y alturas separados.