Jak zastosować wiele transformacji w CSS?

Używając CSS, jak mogę zastosować więcej niż jeden transform?

Przykład: poniżej zastosowano tylko tłumaczenie, a nie rotację.

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

Musisz umieścić je w jednym wierszu:

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

Jeśli masz wiele dyrektyw transformacji, zastosowana zostanie tylko ostatnia. To jak każda inna reguła CSS.

Należy pamiętać, że wiele transformacji w jednym wierszu dyrektywy są stosowane od prawej do lewej .

To: transform: scale(1,1.5) rotate(90deg);
i:transform: rotate(90deg) scale(1,1.5);

będzie nie produkują ten sam wynik:

.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>

Dodaję tę odpowiedź nie dlatego, że prawdopodobnie będzie pomocna, ale tylko dlatego, że jest prawdziwa.

Oprócz korzystania z istniejących odpowiedzi wyjaśniających, jak wykonać więcej niż jedno tłumaczenie, łącząc je w łańcuchy, możesz także samodzielnie zbudować matrycę 4x4

Złapałem następujący obraz z jakiejś przypadkowej strony, którą znalazłem podczas google która pokazuje matryce obrotowe:

Obrót wokół osi x:
Obrót wokół osi y:
Obrót wokół osi z:

Nie mogłem znaleźć dobrego przykładu tłumaczenia, więc zakładając, że dobrze pamiętam / rozumiem, tłumaczenie:

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

Zobacz więcej w artykule Wikipedii na temat transformacji, a także w samouczku Pragamatic CSS3, który dość dobrze to wyjaśnia. Innym przewodnikiem, który wyjaśniłem, który wyjaśnia macierze arbitralnego obrotu, są notatki Egona Ratha dotyczące macierzy

Mnożenie macierzy działa oczywiście między tymi macierzami 4x4, więc aby wykonać obrót, a następnie tłumaczenie, należy wykonać odpowiednią macierz obrotu i pomnożyć ją przez macierz tłumaczenia.

To da ci nieco więcej swobody, aby to zrobić właściwie, a także sprawi, że prawie całkowicie nikt nie będzie mógł zrozumieć, co robi, w tym ciebie za pięć minut.

Ale wiesz, to działa.

Edycja: Właśnie zdałem sobie sprawę, że nie wspomniałem chyba o najważniejszym i praktycznym zastosowaniu tego, jakim jest stopniowe tworzenie złożonych transformacji 3D za pomocą JavaScript, w których sprawy będą miały trochę więcej sensu.

Możesz także zastosować wiele transformacji, używając dodatkowej warstwy znaczników, np .:

<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>

Może to być bardzo przydatne podczas animowania elementów za pomocą transformacji za pomocą Javascript.

Możesz zastosować więcej niż jedną transformację w ten sposób:

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

Jakiś czas w przyszłości możemy napisać to w ten sposób:

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

Stanie się to szczególnie przydatne przy stosowaniu poszczególnych klas do elementu:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Ta składnia jest zdefiniowana w toku specyfikacji CSS Transforms Level 2 , ale nie może znaleźć niczego na temat bieżącej obsługi przeglądarki innej niż Chrome Canary. Mam nadzieję, że pewnego dnia wrócę tutaj i zaktualizuję obsługę przeglądarki;)

Znalazłem informacje w tym artykule, które możesz chcieć sprawdzić odnośnie obejść dla obecnych przeglądarek.

Po prostu zacznij od tego, że w CSS , jeśli powtórzysz 2 lub więcej wartości, zawsze stosowana jest ostatnia, chyba że używasz !importanttagu, ale jednocześnie unikaj używania !importantjak najwięcej, więc w twoim przypadku to jest problem, więc drugi zastąpienie transformacji pierwsze w tym przypadku ...

Jak więc możesz robić, co chcesz? ...

Nie martw się , transformacja akceptuje wiele wartości jednocześnie ... Więc poniższy kod będzie działał:

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

Jeśli chcesz pobawić się transformacją, uruchom iframe z MDN poniżej:

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

Spójrz na poniższy link, aby uzyskać więcej informacji:

<< Przekształć CSS >>

Przekształć Obracanie i tłumaczenie w jednym wierszu css: -Jak?

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>