Powiększanie obrazków przy pomocy przekształceń CSS3
WYSIWYG Web Builder wspiera tworzenie stron z uzyciem przekształceń CSS3, potrafi tworzyć podstawowe przekształcenia takie jak obrót, pochylenie, skala i translate.
W tym tutorialu stworzymy powiększanie obrazków bez użycia JavaScript. Należy jednak pamiętać, że tylko nowoczesne przeglądarki obsługują takie przekształcenia ! .Firefox / Safari / Opera / Chrome / IE10, obsługują poprawnie takie przekształcenia, a nie będa one działać na Internet Explorer 9 lub starszych wersjach!
Krok 1
Dodaj obiekt obraz i zmienić jego rozmiar (zmniejsz) do rozmiaru np. około 50% oryginalnego rozmiaru.
Krok 2
Otwórz kartę właściwości obrazu i przejdź do zakładki CSS Animation i w sekcji Przejścia dodaj nowe przejście klikając "Add"
• Ustaw wyzwalacz  na "(default)".
• Ustaw czas trwania na 500, opóźnienie na 0, Timing na na linear.
• Wybierz "transform" dla Property z rozwijanej listy, pozostałe wartości pozostaw bez zmian czyli takie jakie są ustawione domyślnie
• Kliknij 'OK'  aby zatwierdzić ustawienia.
Related tutorials (ang):
Krok 3
Otwórz ponownie kartę właściwości obrazu i przejdź do zakładki CSS Animation i w sekcji Przejścia dodaj jeszcze jedno nowe przejście klikając "Add"
• Ustaw wyzwalacz na 'hover'
• Jak poprzednio ustaw czas trwania na 500, opóźnienie na 0, Timing na na linear.
• Wybierz 'transform' z rozwijanej listy
• Ustaw obie wartośći Scale X i Scale Y na 2.0 ,a pozostałe  wartości pozostaw bez zmian. Jeśli wcześniej zmniejszyłeś obrazek na 50% oryginału to wartość Scale 2.0 spowoduje że jego rozmiary podwoją się czyli będzie miał teraz rozmiar oryginału.
• Kliknij 'OK'  aby zatwierdzić ustawienia.
Krok 4
Teraz na koniec dodamy jeszcze efekt wirowania
Przejdź ponownie do ostatnio dodanego Przejścia (to dotyczące "hover" ) zaznaczając i klikając przycisk "Edytuj". W ustawieniu Rotate wstaw wartość '360'. Spowoduje to że dodatkowo przy 'hover' obrazek obróci się o 360°.Czyli logicznie rozumując podstawienie 720 spowoduje że obrazek wykona 2 obroty w tym samym czasie. Kliknij 'OK'  aby zatwierdzić ustawienia.Użyj podglądu lub opublikuj stronę aby  zobaczyć działanie.
Tak będą wpływały powyższe ustawienia na obrazek obok.
Tak będzie teraz wyglądał efekt po dodaniu obrotu
Tutoriale powiązane tematycznie (pl):

Uwagi:
Zwróć uwagę że obrazek pierwszy przy najechaniu wskaźnikiem (hover) wychodzi na plan pierwszy przed obrazkiem nr.2. Pomimo niższego index-u. Jako że w oknie edycji nie mamy dostępu do Div-a w którym będzie obrazek , a Web Builder tworzy tego div-a z parametrem z-index ustawionym na stałe według kolejności w menadżerze obiektów zachodzi więc potrzeba dodania manipulacji parametrem z-index. Zrealizowano to dodając do styli pomiędzy <HEAD> a </HEAD> kawałek kodu w którym deklaracja ! important niweluje z-index dodany dla kontenerów w <BODY>






Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017