Escala / zoom un elemento DOM y el espacio que ocupa usando CSS3 transform scale()

Question

Escala / zoom un elemento DOM y el espacio que ocupa usando CSS3 transform scale()

En el centro de mi página tengo un elemento div con algún contenido (otros divs, imágenes, lo que sea).

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

Me gustaría escalar ese elemento (contenido a escala) y todos sus hijos. Parece un trabajo para la operación de escala de CSS3 transform. Sin embargo, el problema es que esta es una transformación en la visualización de esa jerarquía de elementos solamente, no cambia la cantidad de espacio (o posición) del elemento en la página. En otras palabras, escalar ese elemento más grande causará se superponen con el texto "antes" y "después".

¿Hay una manera simple/confiable de escalar no solo la representación visual, sino también la cantidad de espacio ocupado?

Puntos extra para CSS puro sin Javascript. Aún más puntos para una solución que haga lo correcto con otras funciones de transformación como rotar y sesgar. Esto no tiene que usar transformación CSS3, pero necesita ser compatible con todos los navegadores compatibles con HTML5 recientes.

37

css html5 css3 scale css-transforms

Author: Rich Bradshaw, 2012-05-17

Source

1 answers

score 9 · Accepted Answer

El HTML (Gracias Rory)

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

</body>
</html>

El CSS (Todavía comenzó desde la base de Rory)

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scale img {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

La Explicación:

Estoy usando font size y ems para "escalar" las dimensiones de los elementos secundarios.

Los Ems son unidades de dimensión que son relativas al tamaño de fuente del contexto actual.

Así que si digo que tengo un tamaño de fuente de 13px y un borde de 1 (el ancho de borde deseado en píxeles) divded por 13 (el tamaño de fuente del contexto actual también en píxeles) = 0.07692307692307693 em el navegador debe representar un borde 1px

Para emular un relleno de 15px utilizo la misma fórmula, (píxeles deseados)/(tamaño de fuente del contexto actual en píxeles) = ems deseado. 15 / 13 = 1,1538461538461537 em

Para domar la escala de la imagen utilizo un viejo favorito mío: la escala de preservación de proporción natural, permítanme explicar:

Las imágenes tienen una altura y anchura naturales y una relación entre ellas. La mayoría de los navegadores conservarán esta relación si tanto el ancho como el alto se establecen en auto. Usted puede entonces controle el ancho deseado con min-width y max-width, en este caso haciendo que siempre se escale al ancho completo del elemento padre, incluso cuando se escale más allá de su ancho natural.

(También puede usar max-width y max-height 100% para evitar que la imagen se salga de los bordes del elemento padre, pero nunca se escale más allá de sus dimensiones naturales)

Ahora puede controlar la escala ajustando el tamaño de fuente en #content-to-scale. 1.1 em es aproximadamente igual a escala(1.1)

Esto tiene algunos inconvenientes: el tamaño de fuente anidado en ems se aplica de forma recursiva. Significado si usted tiene:

<style type="text/css">
    div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style>
<div>
    <span>
        <span>
            Text
        </span>
    </span>
</div>

Terminará con "Texto" renderizado a 4px en lugar de los 8px que podría esperar.