Jak zastosować wiele transformacji w CSS?

602

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);        
}
Ben
źródło

Odpowiedzi:

993

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>

lukad
źródło
55
Próbowałem oddzielić je znakiem „”, podobnie jak w przypadku wielu cieni, ale to nie zadziałało. Dziękuję Ci.
Ben
2
czy można zastosować jedną transformację przed drugą ... jak pochylenie przed obróceniem? Jeśli chodzi o mnie, bez względu na to, co robię, element jest najpierw obracany, a następnie pochylany, co skutkuje czymś, czego nie chcę.
Muhammad Umer,
2
więc teraz podzielę je na wiele linii
aWebDeveloper
2
transform: translate (100px, 100px) rotate (45deg) translate (100px, 100px) rotate (45deg); równa się transformacja: tłumacz (
200 pikseli, 200 pikseli
3
@ jave.web, Miałeś na myśli od lewej do prawej , prawda? Ponieważ transform: scale(1,1.5) rotate(90deg);obrót nastąpiłby przed skalą.
Jargs
43

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 x
Obrót wokół osi y:Obrót wokół osi y
Obrót wokół osi z: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.

Jeff
źródło
3
„Losowa strona” w mines.edu jest niestety martwym linkiem.
Matt Sach
1
Podobnie jak link 9elements :(
Matt Sach
1
@MattSach Ok, podobno dla mnie „później dzisiaj” oznacza „sześć miesięcy później”, ale przynajmniej link do 9elementów został naprawiony (ktoś inny naprawił link do losowych stron z Waybackiem, a ja poszedłem za ich przykładem)
Jeff
1
Zrobiłem również to , aby pomóc im zrozumieć.
alex
6
to naprawdę nie pasuje do tego tematu
user151496
24

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.

Richtelford
źródło
Twoje zapomnienietransform-style: preserve-3d
Jack Giffin
Nie jest to konieczne w przypadku zagnieżdżonych transformacji 2d - zależy od pożądanego wyniku. Pochodzenie transformacji najprawdopodobniej przyda się.
richtelford
21

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

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
geekme
źródło
2

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.

schellmax
źródło
1

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

Alireza
źródło
0

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>

Vinkal
źródło