html - sub - Escala CSS desde la parte superior izquierda

title html css

Question

Estoy tratando de escalar toda mi página desde la parte superior izquierda. Así es como se ve mi página original:

Sin embargo, cuando intento escalar mi página, esto sucede:

Este es mi CSS:

html {
    zoom: 1.4; /* Old IE only */
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: top left;
}

¿Qué estoy haciendo mal? Se corta parte de mi página.

Answer 1

Pude "resolver" mi problema.

Esto es lo que intenté:

• En el CSS que se muestra en la pregunta, cambié html al body :

  body {
      zoom: 1.4; /* Old IE only */
      -moz-transform: scale(1.4);
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
      transform-origin: top center;
      margin-top: 5px;
  }

• Cambié transform-origin: top left al transform-origin: top center .

• También cambié el CSS de mi contenedor div para que esté centrado.

Esto solucionó el problema, en parte, ya que se centraba para cubrir bien.

Sin embargo, parte de la página superior aún no se muestra correctamente. Para arreglar esto agregué un margin-top a mi body .

Answer 2

Sé que esta pregunta tiene 3 años, pero me topé con ella. La razón por la que su transformación no está posicionada correctamente es porque sus parámetros de origen de transformación están al revés y, por lo tanto, se ignoran. Es "origen de la transformación: eje x del eje x", por lo que debería tener "origen de la transformación: parte superior izquierda", no "origen de la transformación: parte superior izquierda".

Answer 3

 zoom: 1.4; 
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4); 

La escala es cortar su contenido. Reducir la escala a 0,4, se está procesando correctamente.

zoom: 0.4; 
-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);