Wie wendet man mehrere Transformationen in CSS an?

Question

Mit CSS, wie kann ich mehr als eine transform anwenden?

Beispiel: Im folgenden wird nur die Übersetzung angewendet, nicht die Rotation.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Answer 1

Die Lektion, die ich gelernt habe.

Wenn Sie React-CSS von style verwenden, fügen Sie keine Semikolons ein, auch am Ende, da sie automatisch und intern von React eingefügt werden.

Genauso wie:

style={                             
  transform: "rotate(90deg) scaleX(-1)",
}

Answer 2

Es ist eine alte Frage, die sich kürzlich als für mich sehr relevant herausstellte. Ich fand 'transform: matrix(..)' bequemer zu verwenden. Für das besagte Problem bezieht sich das nachstehende Beispiel auf eine Rotation von ca. 15 Grad und eine Translation von 20px nach rechts (aus Gründen der Bequemlichkeit) auf der x-Achse.

.matrixTransform {
    transform-origin: top left;
    transform: matrix(0.965,0.258,-0.258,0.965,20,0);
    font-size: 30px;
}
.combinedTransform {
    transform-origin: top left;
    transform: rotate(15deg) translateX(20px);
    font-size: 30px;
}

A
B

Soweit ich weiß, verwendet diese bestimmte Transformation anfängliche 4 Parameter, um Transformationen wie Skalierung, Rotation darzustellen. Und sie scheinen in Reihen-und-Spalten-Reihenfolge zu sein. Die verbleibenden zwei sind Translationen in der x- und y-Achse. Ich fand das Wolfram Alpha Spickzettel (Rechner) sehr nützlich.

Answer 3

Fangen Sie einfach dort an, dass in CSS, wenn Sie 2 oder mehr Werte wiederholen, immer der letzte angewendet wird, es sei denn, Sie verwenden das !important Tag, aber gleichzeitig vermeiden Sie die Verwendung von !important so weit wie möglich, also in Ihrem Fall ist das das Problem, also überschreibt die zweite Transformierung die erste in diesem Fall...

Wie können Sie also das tun, was Sie wollen?...

Keine Sorge, transform akzeptiert mehrere Werte gleichzeitig... Also wird dieser Code unten funktionieren:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //mehrere
}

Wenn Sie gerne mit transform herumspielen möchten, führen Sie das iframe von MDN unten aus:

Schauen Sie sich den Link unten für weitere Informationen an:

<< CSS transform >>

Answer 4

Transform Rotate und Translate in einer einzigen Zeile CSS: Wie?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

  A