Hoe pas ik meerdere transformaties toe in CSS?

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}
.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}
.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>
<div class="orderTwo">
  A
</div>

Antwoord 2, autoriteit 4%

Ik voeg dit antwoord niet toe omdat het waarschijnlijk nuttig is, maar gewoon omdat het waar is.

Naast het gebruik van de bestaande antwoorden waarin wordt uitgelegd hoe u meer dan één vertaling kunt maken door ze aan elkaar te koppelen, kunt u ook bouw zelf de 4×4 matrix

Ik heb de volgende afbeelding gepakt van een willekeurige site die ik vond tijdens het googlendie rotatiematrices toont:

Rotatie rond x-as:
Rotatie rond de y-as:
Rotatie rond z-as:

Ik kon geen goed voorbeeld van vertaling vinden, dus aangenomen dat ik het me goed herinner/begrijp, vertaling:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Bekijk meer in het Wikipedia-artikel over transformatieen in de Pragamatic CSS3-zelfstudiedie het vrij goed uitlegt. Een andere gids die ik heb gevonden waarin willekeurige rotatiematrices worden uitgelegd, is Egon Rath’s aantekeningen over matrices

Matrixvermenigvuldiging werkt natuurlijk tussen deze 4×4-matrices, dus om een rotatie uit te voeren gevolgd door een translatie, moet je de juiste rotatiematrix maken en deze vermenigvuldigen met de translatiematrix.

Dit kan je wat meer vrijheid geven om het precies goed te doen, en zal het ook vrijwel onmogelijk maken voor iedereen om te begrijpen wat het doet, inclusief jou in vijf minuten.

Maar weet je, het werkt.

Bewerken: ik realiseerde me net dat ik waarschijnlijk het belangrijkste en meest praktische gebruik hiervan heb vergeten te noemen, namelijk het stapsgewijs creëren van complexe 3D-transformaties via JavaScript, waar dingen een beetje logischer zullen zijn.

Antwoord 3, autoriteit 3%

Je kunt ook meerdere transformaties toepassen met een extra laag opmaak, bijvoorbeeld:

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}
.scaled-up
{
    transform: scale(1.5);
}
</style>

Dit kan erg handig zijn bij het animeren van elementen met transformaties met Javascript.

Antwoord 4, autoriteit 2%

U kunt als volgt meer dan één transformatie toepassen:

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

Antwoord 5

Over een tijdje kunnen we het als volgt schrijven:

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

Dit wordt vooral handig bij het toepassen van individuele klassen op een element:

<div class="teaser important"></div>
.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Deze syntaxis is gedefinieerd in de lopende CSS Transforms Level 2-specificatie , maar kan niets vinden over de huidige browserondersteuning behalve Chrome Canary. Ik hoop dat ik op een dag terugkom en de browserondersteuning hier update;)

Vind de informatie in dit artikeldie u wil misschien kijken naar tijdelijke oplossingen voor huidige browsers.

UPDATE: functie is geland in Firefox 72

Antwoord 6

Begin gewoon vanaf daar dat in CSS, als je 2 of meer waarden herhaalt, altijd de laatste wordt toegepast, tenzij je de tag !importantgebruikt, maar tegelijkertijd vermijd het gebruik van !importantzoveel als je kunt, dus in jouw geval is dat het probleem, dus de tweede transformatie overschrijftde eerste in dit geval…

Dus hoe kun je dan doen wat je wilt?…

Maak je geen zorgen, transform accepteert meerdere waarden tegelijk… Dus onderstaande code werkt:

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

Als je graag met transformatie speelt, voer dan het iframe uit van MDNhieronder:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

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

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>