Transformación CSS con cambio de tamaño de elementos

Finalmente descubrí una solución simple y es muy similar a donde empecé.

Admitiré que se necesitaron muchos intentos para resolver esto (durante el último año más o menos) para finalmente resolverlo. En realidad estaba buscando una respuesta a esta pregunta. He tenido problemas con esto antes. De todos modos, empecé a trabajar en esto de nuevo y encontré una solución simple.

De todos modos, el truco era usar el margen inferior junto con el script CSS calc.

Además, debe tener que tener la altura absoluta declarada para el objeto (div). No creo que esto funcione si el div puede expandirse, de lo contrario, después de muchos intentos y horas en esto finalmente tengo una solución muy simple, limpia y funcional.

Así, por ejemplo, altura = 300px (no 30%, o ninguna altura). Incluso establecería overflow - y = hidden si puedes. Si quieres que el div crezca (no tenga una altura absoluta), creo que necesitarás JavaScript. No lo intenté. De lo contrario esto está funcionando correctamente en todas las pruebas.

Estoy seguro de que esto funcionará bien con SASS o MENOS, ya que podría declarar algunas de las cosas repetidas usando variables en el CSS. Aún no lo he intentado.

Algunos comentarios importantes sobre mi solución:

1. Observe que estoy usando la altura del objeto y un método CSS calc junto con el tamaño de transformación para calcular el margen inferior.
2. Codifiqué por colores mi trabajo para ayudar a mostrar lo que está sucediendo.
3. el wrap div tiene relleno solo para mostrar que está funcionando. Son absolutas y no afectan al objeto interno.
4. Si estabas creando una página responsiva, como yo, puedes usar media queries vs classes para obtener el mismo efecto.
5. Estoy usando transform-origin: 50% 0; Este código terminó no siendo tan importante como originalmente pensé que sería. Estoy usando el margen inferior para resolver los problemas que había tenido.
6. En este ejemplo, solo estoy centrando el div en el div padre. Si necesita colocar el div, es un poco más complicado, pero una solución similar funcionará. No lo intenté.
7. Podría usar esta misma solución con jQuery vs CSS. La idea es la misma. Buscaría todos los elementos con la transformación en la página y agregaría el CSS según sea necesario.

También he configurado un Codepen para probar esto con y para compartir.

Https://codepen.io/cyansmiles/details/yvGaVP

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
}

.box.size-80 {
  transform: scale(0.8);
  margin: 0 auto calc(-150px * (1 - 0.8));
}

.box.size-70 {
  transform: scale(0.7);
  margin: 0 auto calc(-150px * (1 - 0.7));
}

.box.size-60 {
  transform: scale(0.6);
  margin: 0 auto calc(-150px * (1 - 0.6));
}

.box.size-50 {
  transform: scale(0.5);
  margin: 0 auto calc(-150px * (1 - 0.5));
}

//etc

<div class="box-wrap">
  <div class="box">
    <h1>Box at 100%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
</div>

Tuve que modificar mi código un poco desde arriba.

Ahora funciona en todos los lados (no solo hacia arriba y hacia abajo). Veo una pequeña edición, creo que es un problema CSS (podría agregar otro píxel al código para resolver esto).

Aquí está el enlace Codepen de trabajo. Siéntete libre de avisarme si lo usas. Se sintió bien finalmente resolver esto.

Https://codepen.io/cyansmiles/pen/bLOqZo

Ps. Estoy bifurcando mi codepen para agregar un móvil CSS.

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
  color: #fff;
}

.box.size-80 {
  background: red;
  transform: scale(0.8);
  margin: 0 calc((-300px * (1 - 0.8)) / 2) calc(-150px * (1 - 0.8));
}

.box.size-70 {
  background: blue;
  transform: scale(0.7);
  margin: 0 calc((-300px * (1 - 0.7)) / 2) calc(-150px * (1 - 0.7));
}

.box.size-60 {
  background: green;
  transform: scale(0.6);
  margin: 0 calc((-300px * (1 - 0.6)) / 2) calc(-150px * (1 - 0.6));
}

.box.size-50 {
  background: orange;
  transform: scale(0.5);
  margin: 0 calc((-300px * (1 - 0.5)) / 2) calc(-150px * (1 - 0.5));
}

//etc

<div class="box-wrap">
  <h1>This is a bunch of boxes!</h1>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box">
    <h1>Box at 100%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
</div>