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);
}
css
css-transforms
Ben
źródło
źródło
transform: scale(1,1.5) rotate(90deg);
obrót nastąpiłby przed skalą.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:
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.
źródło
Możesz także zastosować wiele transformacji, używając dodatkowej warstwy znaczników, np .:
Może to być bardzo przydatne podczas animowania elementów za pomocą transformacji za pomocą Javascript.
źródło
transform-style: preserve-3d
Możesz zastosować więcej niż jedną transformację w ten sposób:
źródło
Jakiś czas w przyszłości możemy napisać to w ten sposób:
Stanie się to szczególnie przydatne przy stosowaniu poszczególnych klas do elementu:
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.
źródło
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
!important
tagu, ale jednocześnie unikaj używania!important
jak 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ł:
Jeśli chcesz pobawić się transformacją, uruchom iframe z MDN poniżej:
Spójrz na poniższy link, aby uzyskać więcej informacji:
<< Przekształć CSS >>
źródło
Przekształć Obracanie i tłumaczenie w jednym wierszu css: -Jak?
źródło