Skalieren/zoomen Sie ein DOM-Element und den Platz, den es einnimmt, mit CSS3 transform scale()

Question 1

In der Mitte meiner Seite habe ich ein div-Element mit Inhalt (andere divs, Bilder, was auch immer).

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

Ich möchte dieses Element (Content-to-Scale) und alle seine untergeordneten Elemente skalieren. Scheint ein Job für die Skalierungsoperation der CSS3-Transformation zu sein. Das Problem ist jedoch, dass dies nur eine Transformation der Visualisierung dieser Elementhierarchie ist und nicht den Platz (oder die Position) des Elements auf der Seite ändert. Mit anderen Worten, wenn Sie dieses Element größer skalieren, wird es mit dem „vorher“- und „nachher“-Text überlappen.

Gibt es eine einfache/zuverlässige Möglichkeit, nicht nur die visuelle Darstellung, sondern auch den belegten Platz zu skalieren?

Extrapunkte für reines CSS ohne Javascript. Noch mehr Punkte für eine Lösung, die das tut das Richtige mit anderen Transformationsfunktionen wie Drehen und Neigen. Dies muss keine CSS3-Transformation verwenden, aber es muss von allen neueren HTML5-fähigen Browsern unterstützt werden.

Question 2

Das HTML (Danke 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>

Das CSS (Immer noch von Rorys Basis aus gestartet)

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%;
}

Die Erklärung:

Ich verwende Schriftgröße und Ems, um die Abmessungen der untergeordneten Elemente zu “skalieren”.

Ems sind Maßeinheiten, die relativ zur Schriftgröße des aktuellen Kontexts sind.

Wenn ich also sage, ich habe eine Schriftgröße von 13 Pixel und einen Rahmen von 1 (die gewünschte Rahmenbreite in Pixel) geteilt durch 13 (die Schriftgröße des aktuellen Kontexts auch in Pixel) = 0,07692307692307693em, sollte der Browser 1 Pixel darstellen Grenze

Um eine 15-Pixel-Auffüllung zu emulieren, verwende ich dieselbe Formel (gewünschte Pixel)/(Schriftgröße des aktuellen Kontexts in Pixel) = gewünschte Ems. 15 / 13 = 1,1538461538461537em

Um die Skalierung des Bildes zu zähmen, verwende ich einen alten Favoriten von mir: das natürliche Verhältnis, das die Skalierung beibehält, lassen Sie mich erklären:

Bilder haben eine natürliche Höhe und Breite und ein Verhältnis zwischen ihnen. Die meisten Browser behalten dieses Verhältnis bei, wenn Breite und Höhe auf automatisch eingestellt sind. Sie können dann die gewünschte Breite mit min-width und max-width steuern, sodass es in diesem Fall immer auf die volle Breite des übergeordneten Elements skaliert wird, selbst wenn es über seine natürliche Breite hinaus skaliert wird.

(Sie können auch max-width und max-height 100 % verwenden, um zu verhindern, dass das Bild über die Grenzen des übergeordneten Elements hinausragt, aber niemals über seine natürlichen Abmessungen hinaus skaliert wird.)

Sie können jetzt die Skalierung steuern, indem Sie die Schriftgröße auf #content-to-scale anpassen. 1,1 em entspricht ungefähr der Skala (1,1)

Dies hat einige Nachteile: verschachtelte Schriftgrößen in ems werden rekusiv angewendet. Bedeutung, wenn Sie haben:

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

Am Ende wird “Text” mit 4 Pixel statt der erwarteten 8 Pixel gerendert.