css3 scale Transformation in übergeordnete div-Element aber halten die Konstante Größe in einige der zugehörigen divs

Ich bin mit css3 skalieren, transformieren, skalieren div mit anderen divs.

Das problem, das ich habe, ist, dass einige der inneren divs, die ich brauche zu halten, wie Sie waren, im Grunde so, als wenn Sie wurden nicht skaliert, sollte Ihre Größe nicht ändern, aber ich muss für die Skalierung des parent-div mit sonst alles innen.

Wie kann Sie Umgekehrt die Skalierung in einige der divs?

Ich bin versucht, eine inverse Skalierung.

Wenn das übergeordnete div-Element angewandt hatte einen Wert von 1,5 , ich bin versuchen zu finden, welchen Wert soll ich nun skalieren die anderen divs zurücksetzen Sie anschaulich, wie Sie aussah, bevor.

InformationsquelleAutor Javier Gonzalez | 2013-03-21
  1. 19

    Wenn der übergeordnete div skaliert wurde um einen Faktor von 1.5, dann müssen Sie den Maßstab der Kinder durch einen Faktor von 1/1.5 = 0.(6) um Ihre Größe konstant.

    Beispiel

    Im Allgemeinen, um abzubrechen für ein untergeordnetes element einer Skala Transformation, die angewendet wurde auf die übergeordneten und hat ein Skalierungsfaktor von a, Sie müssen, um eine andere Skala transformieren der Faktor 1/a auf das Kind selbst.

    Müssen Sie entweder:

    • berechnen Sie manuell die Skala Faktor, bevor Sie irgendetwas anderes machen, und dann verwenden, wie es in deinem code (Beispiel oben verlinkten)
    • verwenden Sie einen Präprozessor übernehmen das für Sie (SASS-Beispiel)
    • verwenden JavaScript zur Berechnung der Skalierungs-Faktor erforderlich für das Kind und
      zum einstellen der Skala transform auf das Kind
    • +1 und ich muss sagen, ich Liebe die CSS-3D-demos verknüpft, aus deinem Profil 🙂
    • Oder Sie können mit calc() und -webkit-calc() zu tun, die Berechnungen =)
    • Yup, das ist eine Coole Idee. Traurige Teil ist, dass die Unterstützung nicht so gut. Funktioniert nur ist Chrome ab version 37 oder 38 und Opera ist offenbar in Rückstand, aber es funktioniert nicht in Firefox oder IE.
    InformationsquelleAutor Ana
  2. 2

    Könnte man eine CSS-variable zum speichern von Skalierungs-Faktor, und verwenden Sie dann calc() berechnen Sie die inverse Skala für die Kind-Elemente, die eine bestimmte Klasse:

    CSS:

    .wrapper {
  transform: scale(var(--scale));
  background: #ddd;
}

.wrapper > * {
  text-align: center;
}

.wrapper > .revertscale {
  transform: scale(calc(1/var(--scale)));
}

    HTML:

    <div class="wrapper" style="--scale: 0.8">
  <h2>scaled title</h2>
  <p>scaled description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2 class="revertscale">not scaled title</h2>
  <p class="revertscale">not scaled description</p>
</div>

    ⋅
    ⋅
    ⋅

    In Fall, dass Sie nicht wollen, dass irgendeiner der untergeordneten Elemente zu skalieren, einen anderen Weg, es zu tun wäre, um Stil Ihre wrapper als ein pseudo-element :

    CSS:

    .wrapper {
  position: relative;
}

.wrapper > * {
  text-align: center;
}

.wrapper::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(var(--scale));
  background: #ddd;
}

    HTML:

    <div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>

    InformationsquelleAutor Takit Isy
  3. 1

    Die inverse einer beliebigen Skala Betrieb ist 1 /<scale> also durch die Skalierung der container durch 1.5 würden Sie skalieren müssen die Kinder durch 1 /1.5 = 0.6

    Leider, gemäß der Spezifikation, das man nicht einfach CSS verwenden, wie:

    transform: scale(1/1.5);

    da-Skala ist definiert als scale(<Anzahl>[, <Anzahl>])

    wo <number> ist

    entweder einen oder null oder mehr Ziffern, gefolgt von einem Punkt (.) gefolgt von einer oder mehr Dezimalstellen

    So müssen Sie die Berechnung selbst oder kann eine dynamische stylesheet-Sprache wie WENIGER, die unterstützt diese Art von Operationen.

    Demo (webkit) nur

    InformationsquelleAutor andyb
  4. 0

    Wenn Sie, wie vorgeschlagen, verwenden Sie die invertierte der Skalierungsfaktor, dann beachten Sie, dass das Kind nicht unbedingt immer seine ursprüngliche Größe während die Skala transformation -- das geht natürlich nur, wenn Sie lassen Sie die Waage verwandelt eine Dauer haben (z.B. durch die Verwendung transition: transform;).

    • Irgendwelche Ideen auf, wie dieses Problem zu beheben?
    InformationsquelleAutor Goran W
Schreibe einen Kommentar