Nie mam coś weny na instrukcje. Prezentacja ładnego efektu transform. Możemy nim sprawić, że dowolny element się obróci w dowolnej płaszczyźnie lub przesunie. Warto spojrzeć na układ współrzędnych. Kod wstawiamy w nawiasie klamrowym po dowolnym selektorze, of course, tu jest dodany po najechaniu myszką (:hover). Jeśli nie dodasz do niego transition: 5s (s = sekundy, oczywiście dowolna wartość) to element wykona swój ruch od razu i nie będzie można popatrzeć. Miłego myszkowania.
transform: rotate(90deg) Obracamy, wartości dodatnie w prawo, ujemne w lewo. Mogą być dowolne, a przy jakiejś ogromnej wartości - 5000deg - obiekt będzie się po prostu obracał.
transform: rotateX(90deg) Obracamy wokół osi X. Zasady podobne jak poprzednio.
transform: rotateY(90deg)Obracamy wokół osi Y.
transform: rotate3d(1,1,1,90deg) O tak, wszystko, co w 3D jest fajne. Kolejne cyfry 1 to osie X, Y, Z - możecie oś X dać jeden (obrót o 90deg), Y 2 (180 deg) itd.. Łatwiej jednak dawać wartość 360 niż mnożyć wszystko przez 4.
transform: skew(90deg, 90deg) Obracanie wokół osi układu współrzędnych, pierwsze X, drugie Y.
transform: skew(20deg, 20deg) Ten sam efekt zmniejszony
transform: skew(0deg, 20deg) Tylko dla X
transform: skew(20deg, 0deg) Tylko Y
transform: translate(10px, 10px) Przesuwamy nasz element po układzie, przy czym dodatnie X - pierwsza wartość - są po prawej, a dodatnie Y - druga - w dole. Dokładnie tak jak na geometrii translacja o wektor :)
Brak komentarzy:
Prześlij komentarz