Transformation CSS avec redimensionnement de l'élément

J'ai finalement trouvé une solution simple et elle est très similaire à celle d'où j'ai commencé.

J'admets qu'il a fallu de nombreuses tentatives pour comprendre cela (au cours de la dernière année) pour finalement le comprendre. Je cherchais en fait une réponse à cette question. J'ai eu des problèmes avec cela. Quoi qu'il en soit, j'ai commencé à travailler à nouveau et j'ai trouvé une solution simple.

Quoi qu'il en soit, l'astuce consistait à utiliser le bas de la marge avec le script CSS calc.

En outre, vous devez avoir une hauteur absolue déclarée pour l'objet (div). Je ne pense pas que cela fonctionnera avec si la div peut se développer, sinon, après de nombreuses tentatives et heures sur cela, j'ai enfin une solution de travail très simple, propre.

Ainsi, par exemple, height = 300px ( pas 30%, ou pas de hauteur). Je voudrais même définir overflow-y = hidden si vous le pouvez. Si vous voulez que la div se développe (ne pas avoir une hauteur absolue), je crois que vous aurez besoin de JavaScript. Je n'ai pas essayé. Sinon, c' fonctionne correctement dans tous les tests.

Je suis sûr que cela fonctionnera bien avec SASS ou moins puisque vous pouvez déclarer certaines des choses répétées en utilisant des variables dans le CSS. Je n'ai pas essayé encore.

Quelques remarques importantes sur ma solution:

1. notez que j'utilise la hauteur de l'objet et une méthode CSS calc avec la taille de transformation pour comprendre la marge inférieure.
2. j'ai codé mon travail pour aider à montrer ce qui se passe.
3. le wrap div a un rembourrage qui n'est là que pour montrer qu'il fonctionne. Ils sont absolus et cela n'affecte pas l'objet interne.
4. Si vous construisez une page réactive, comme je le suis, vous pouvez utiliser des requêtes multimédia vs des classes pour obtenir le même effet.
5. j'utilise transform-origin: 50% 0; ce code a fini par ne pas être aussi important que je le pensais à l'origine. J'utilise la marge inférieure pour résoudre les problèmes que j'avais eu.
6. dans cet exemple, Je ne fais que centrer la div dans le div parent. Si vous avez besoin de placer le div, c'est un peu plus compliqué, mais une semblable solution. Je n'ai pas le tenter.
7. Vous pouvez utiliser cette même solution avec jQuery vs CSS. L'idée est la même. Vous recherchez tous les éléments avec la transformation dans la page et ajoutez le CSS au besoin.

J'ai aussi mis en place un Codepen pour tester cela avec et pour partager.

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>

J'ai dû modifier mon code un peu d'en haut.

Il fonctionne maintenant de tous les côtés (pas seulement de haut en bas). Je vois un peu d'édition, je pense que c'est un problème CSS (vous pouvez ajouter un autre pixel au code pour résoudre cela).

Voici le lien CodePen de travail. N'hésitez pas à me faire savoir si vous l'utilisez. Je me sentais bien de comprendre enfin cela.

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

Ps. Je bifurque mon codepen pour ajouter un mobile 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>