CSS – Transform zum Element hinzufügen, ohne das vorhandene zu entfernen [duplicate]

Lesezeit: 3 Minuten

Benutzeravatar von StyleSh1t
StyleSh1t

Also, ich habe ein div, wie folgt:

<div class="rotate-90"></div>

und das CSS:

.rotate-90
{
    transform: rotate(90deg);
}

und ich möchte dem div eine weitere Klasse mit dem Namen “scale-2” wie folgt hinzufügen:

<div class="rotate-90 scale-2"></div>

.scale-2
{
    transform: scale(2);
}

aber wenn ich versuche, sie zu kombinieren, überschreibt die zweite Klasse die erste, sodass ich nur ein skaliertes div bekomme und nicht rotiert. Wie kann ich also die Transformationen kombinieren, ohne den Code zweimal zu schreiben oder die Klassencodes zu kombinieren?

Vielen Dank 🙂

Benutzeravatar von Sebastian G. Marinescu
Sebastian G. Marinescu

Aktualisierung 2022

Ende letzten Jahres veröffentlichte das W3C den Working Draft für “CSS-Transformationsmodul Level 2“.

Diese Spezifikation fügt neue Transformationsfunktionen und -eigenschaften für dreidimensionale Transformationen hinzu, und Komfortfunktionen für einfache Transformationen.

Es fügt hinzu “Individuelle Transformationen“:

Da die Browserunterstützung über 85% liegt, sollte es brauchbar sein, wenn Ihr Projekt keine alten Browser unterstützen muss.

Ab jetzt solltest du also folgendes können:

.rotate-90
{
    rotate: 90deg;
}

.scale-2
{
    scale: 2;
}

Hier ist ein nettes Vorstellungsvideo: “Eine neue Art, CSS-Transformationen durchzuführen!“ von Kevin Powell.


Ursprüngliche Antwort:

Transformationsregeln werden wie alle anderen Regeln außer Kraft gesetzt.

Sie können die jedoch kombinieren transformiert in einer Regel:

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
}

Wenn die Kombination der beiden Klassen nicht Ihr Wunsch ist (was ich absolut nicht verstehe, aber respektiere)und wenn Ihr Framework nur diese beiden Effekte hat, als Sie verwenden könnten Zoomen für die Maßstabsregel:

.scale-2 {
    zoom: 2;
}

  • Er / sie möchte die Attribute nicht kombinieren.

    – richa

    22. August 2016 um 12:31 Uhr

  • @Era, es gibt keine andere Möglichkeit, dies zu tun. Auch OP kombiniert bereits die Klassen: class="rotate-90 scale-2" – warum also sollte er/sie sein CSS nicht entsprechend und richtig anpassen?

    – Sebastian G. Marinescu

    22. August 2016 um 12:34 Uhr


  • @SebastianG.Marinescu, ich arbeite an einem kleinen CSS-Framework, also möchte ich Klassen erstellen und sie bei Bedarf verwenden. Ich möchte nicht, dass meine FW einen anderen Code überschreibt oder dass ein anderer Code meinen FW-Code überschreibt. Ich möchte auch keine Klassen kombinieren, ich möchte, dass jede Klasse das tut, was sie tun soll.

    – StyleSh1t

    22. August 2016 um 12:41 Uhr

  • @StyleShit: Ich verstehe. Aber Sie müssen verstehen, dass dies im Fall der Transform-Eigenschaft nicht möglich ist. Sie verwenden entweder transform nur für einen Effekt, oder Sie kombinieren alle Ihre Transformationseffekte für jeden Fall / jede Kombination, die es geben könnte, richtig. Für den Fall, dass Ihr Framework nur diese beiden Effekte hat, können Sie versuchen, sie zu verwenden zoom: 2 für dein scale-2-Klasse.

    – Sebastian G. Marinescu

    22. August 2016 um 12:50 Uhr

  • @StyleShit: Du verstehst es auch falsch – das Kombinieren der Klassen zu einer Regel ist es nicht “Anderen Code überschreiben”sondern Ihre Regeln anerkennen und korrigieren.

    – Sebastian G. Marinescu

    22. August 2016 um 12:59 Uhr

Weil Sie verwenden transform Eigenschaft wieder und ihre überschreibende vorherige.

Sie können beide in einer Transformation wie dieser verwenden

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
}

Die Transform-Eigenschaft sollte mit Präfix verwendet werden, damit sie in allen Browsern so funktioniert

.rotate-90.scale-2 {
    transform: rotate(90deg) scale(2);
    -moz-transform: rotate(90deg) scale(2);
    -ms-transform: rotate(90deg) scale(2);
    -webkit-transform: rotate(90deg) scale(2);
    -o-transform: rotate(90deg) scale(2);
}

  • Er / sie möchte die Attribute nicht kombinieren.

    – richa

    22. August 2016 um 12:31 Uhr

  • without writing the code twice or combining the classes codes?

    – richa

    22. August 2016 um 12:32 Uhr

1430110cookie-checkCSS – Transform zum Element hinzufügen, ohne das vorhandene zu entfernen [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy