Spojrzenie w transformacje 2D CSS3
The Moduł transformacji jest ogromnym dodatkiem w CSS3, zajmuje sposób, w jaki manipulujemy elementami na stronie internetowej do następnego poziomu.
Są pewne eksperymenty, które naprawdę mnie zadziwiają, przykłady takie jak ten. Jednak nie będziemy budować czegoś w rodzaju ikony CSS, która może w jakiś sposób przekształcić się w Autobota, ponieważ może być przytłaczająca i nie do końca użyteczna również w prawdziwym życiu.
Zamiast tego tym razem cofniemy się i przejrzymy podstawy transformacji 2D CSS3, aby zobaczyć, jak działa na podstawowym poziomie.
Składnia
Moduł Transformacje CSS3 zasadniczo pozwala nam na przekształcenie elementu do pewnego stopnia, takiego jak tłumaczenie, skalowanie, obracanie i pochylanie.
Oficjalna składnia to transform: metoda (wartość). Jednak, podobnie jak wszystkie inne wspaniałe dodatki CSS3, które są wciąż na wczesnym etapie, obecne przeglądarki nadal potrzebują wersji składni do uruchomienia transformacji. Tak więc pełna składnia okaże się następująca:
transform: metoda (wartość); / * Oficjalna składnia W3C * / -o-transform: method (value); / * Opera 10.5+ * / -ms-transform: metoda (wartość); / * Internet Explorer 9.0+ * / -moz-transform: metoda (wartość); / * Firefox 3.6+ * / -webkit-transform: method (value); / * Chrome / Safari 3.2+ * /
Również metoda, o której mówimy powyżej, to funkcje transformacji, które można zastąpić jednym z następujących: Tłumaczyć(), skala(), obracać się() lub ukośnie().
Wartość
Większość wartości metody będzie odpowiadać wartości Oś X i Oś Y. Jeśli pamiętasz układ współrzędnych kartezjańskich z klasy matematyki w szkole średniej, podstawowa zasada jest dość podobna, oś X reprezentuje poziomy linia i oś Y reprezentują pionowy linia.
Z wyjątkiem rotacji. The obrót użyje współrzędne biegunowe który jest wyrażony w stopniach od 0 do 360.
Wartości dla wszystkich metod mogą być zarówno ujemne, jak i dodatnie. Wystarczy jednak zanotować, ponieważ strona internetowa jest odczytywana sekwencyjnie od góry do dołu, co sprawia, że oś Y w sieci działa odwrotnie niż pierwotna zasada współrzędnych kartezjańskich. Oznacza to, że gdy dodasz wartość ujemną do Oś Y, zamiast tego przejdzie na górę.
Korzystanie z transformacji
Teraz zobaczmy następującą podstawową demonstrację, aby zobaczyć Transformację w akcji.
Tłumaczę
Nie daj się zachmurzyć terminowi Tłumaczyć, nie będzie tłumaczyć języka obcego. The Tłumaczyć tutaj jest metoda przesuwania elementów w pewnym kierunku.
Metoda zawiera dwie wartości; X i Y. Wartość X jak wskazaliśmy powyżej, weźmiemy element poziomo; w lewo lub w prawo, podczas, gdy Y wartość przeniesie go pionowo do na dole lub na górze.
Teraz zobaczmy kilka prostych demonstracji poniżej:
div width: 100px; wysokość: 100px; transform: translate (100px, 250px);
Powyższy fragment przeniesie element na 100 pikseli w prawo i 250 pikseli na dół.
div width: 100px; wysokość: 100px; transform: translate (100px, 0);
Fragment powyżej spowoduje przesunięcie elementu w prawo o 100 pikseli, ponieważ zerujemy oś Y. Następnie, jeśli chcemy przesunąć element w lewo, wystarczy ustawić oś X w negatywie, w następujący sposób:
div width: 100px; wysokość: 100px; transform: translate (-100px, 0);
- Demo „Przetłumacz”
Alternatywnie, jesteśmy w stanie przesunąć element w jednym kierunku za pomocą tych indywidualnych metod; translateX () i tłumaczyć (), różnica jest taka, że każda z tych metod przyjmuje tylko jedną wartość.
Praktycznie rzecz biorąc, transform: translate (-100px, 0) jest również równy transform: translateX (-100px).
II - Skala
The skala metoda pozwala nam powiększ lub zmniejsz elementy z rzeczywistej wielkości. Wartość skali jest taka sama jak wartość Tłumaczyć powyżej, zawiera również X i Y. Jedyną różnicą jest to, że nie określamy jednostki. Oto przykład:
div width: 100px; wysokość: 100px; transform: skala (1,5);
Powyższy przykład spowoduje powiększenie div 1,5 lub 150% jego rzeczywistej wielkości, a ponieważ skalujemy go równo dla kierunków X i Y, musimy tylko zadeklarować go w jednej wartości. Możesz również zadeklarować to w ten sposób transform: skala (1.5,1.5); jeśli chcesz pójść więcej szczegółów, zrobi to samo.
Ponadto, jeśli chcemy zmniejszyć element, użylibyśmy konkretnie wartości od 0.999 do absolutnego 0, jak w poniższym przykładzie, który zmniejszy rozmiar div o 50% lub połowę:
div width: 100px; wysokość: 100px; transform: skala (0,5);
Ale bądź ostrożny, jeśli ustawisz wartość na absolutną “0” div po prostu zniknie, więc jeśli nie masz ważnego powodu, by to zrobić, nie poleciłbym tego.
- Demo „Skala”
III - Obróć
Jak wspomnieliśmy wcześniej w tym poście, obracać się metoda wykorzystuje współrzędne biegunowe, więc wartość jest podana w stopniach. Oto dwa przykłady
Poniższy fragment obróci div 30 stopni w prawo.
div width: 100px; wysokość: 100px; transform: rotate (30deg);
Wartość ujemna, jak pokazano w poniższym przykładzie, spowoduje obrót div w przeciwnym kierunku (przeciwnie do ruchu wskazówek zegara) w tym samym stopniu.
div width: 100px; wysokość: 100px; transform: rotate (-30deg);
- Demo „Obróć”
IV - Pochylenie
The ukośnie Metoda pozwala nam stworzyć rodzaj równoległoboku. Zawiera również dwie wartości osi X i Y. Jednak sama wartość jest podana w stopniach, a nie liniowych, jak w przypadku skala albo Tłumaczyć metoda. Oto przykład:
div width: 200px; wysokość: 100px; transform: skew (30deg, 10deg);
- „Skew” demo
V - Metoda wielokrotna
The przekształcać właściwość nie jest ograniczona do obsługi tylko jednej metody, w rzeczywistości możemy dołączyć wiele metod w pojedynczych deklaracjach, takich jak:
div width: 100px; wysokość: 100px; transform: translateX (100px) rotate (45deg);
Powyższy fragment przeniesie element 100px w prawo, a jednocześnie obróci się o 45 stopni.
Demo „Wiele metod”.
Przekształć pochodzenie
The od pochodzenia - jak sama nazwa wskazuje - służy do kontrolowania punktu początkowego transformacji. Jeśli nie zadeklarujemy jawnie tej właściwości z następującą składnią początek transformacji: X Y;, wtedy przeglądarka przyjmie wartość domyślną, która wynosi 50% dla X i 50% dla Y.
Teraz, jeśli określimy początek transformacji do 0 (X) 0 (Y) transformacja rozpocznie się w lewym górnym rogu.
Ponownie, wszystkie przeglądarki nadal wymagają wersji prefiksu, aby wywołać tę właściwość. Oto pełna wersja, która zapewnia, że działa w większości obecnych przeglądarek:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; początek transformacji: X Y;
- Demo „Pochodzenie transformacji”
Wniosek
Przeszliśmy przez wszystkie cztery podstawowe metody transformacji; tłumacz, skaluj, obracaj i pochylaj
Jednak, jak już wspomniano, ten moduł jest wciąż na wczesnym etapie, więc jeśli zastosujesz te metody w swojej następnej witrynie, upewnij się, że ulegnie to pogorszeniu w przypadku niezgodnych przeglądarek (nie mam tu na myśli IE6).
Na koniec możesz wyświetlić wszystkie wersje demonstracyjne lub pobrać źródło z poniższych linków.
- Próbny
- Pobierz źródło
