Mörf: CSS-Transforms ignorieren block formating context?

Hallöchen,

kann es sein, dass Veränderungen, die man mit Hilfe der CSS-Anweisung transform auf Objekte ausführt sen jeweiligen Block-Context ignorieren und somit sprengen?

Zumindest will es mir nicht gelingen ein Float-Element, dessen Größe ich mit transform:scale(); verändert habe vernünftig zu clearen.

Oder gibt es hierfür einen anderen Trick?

  1. Om nah hoo pez nyeetz, Mörf!

    Zumindest will es mir nicht gelingen ein Float-Element, dessen Größe ich mit transform:scale(); verändert habe vernünftig zu clearen.

    Zeigen!

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dia und diabolisch.

  2. Hallo,

    Wenn du ein Element mit transform: scale() skalierst, so ändert das das Layout nicht. Die Größe des Elements im Layout ist die Größe vor jeder Transformation. Beispiel:

    http://codepen.io/molily/pen/odbly?editors=110

    Das Float wird durchaus eingeschlossen, aber die Container-Größe ändert sich nicht, weil sich die Höhe des Containers nach der nicht-skalierten Höhe des Floats richtet.

    Mathias

    1. Hi,

      Das Float wird durchaus eingeschlossen, aber die Container-Größe ändert sich nicht, weil sich die Höhe des Containers nach der nicht-skalierten Höhe des Floats richtet.

      Das meine ich ja damit.
      Lässt sich das nicht irgendwie ändern?
      Oder gibt es außer transform:scale irgendeine andere Möglichkeit ein beliebiges Element (einschließlich aller Unterelemente) in seiner Größe zu verändern, und dabei den jeweiligen Block formating context nicht zu verlassen?

      1. Hallo!

        Lässt sich das nicht irgendwie ändern?

        Konkret nein.

        Oder gibt es außer transform:scale irgendeine andere Möglichkeit ein beliebiges Element (einschließlich aller Unterelemente) in seiner Größe zu verändern, und dabei den jeweiligen Block formating context nicht zu verlassen?

        Du kannst natürlich sämtliche Größen ändern, die den Inhalt formatieren. Z.B. font-size, width, height. Wenn der Inhalt mit em-Einheiten arbeitet, kannst du einfach die font-size des obersten Elements skalieren, sodass sich alle Inhalte mitskalieren. Ob das auf deinen Inhalt anwendbar ist, weiß ich jedoch nicht.

        Grüße
        Mathias