CSS Obraz tła Flip
W tym przewodniku wykonamy wszystkie te techniki odwracania za pomocą właściwości CSS. Tutaj dowiemy się o odwróceniu obrazu w CSS przy użyciu różnych właściwości.
Przykład 1:
Aby odwrócić obraz w CSS, musimy mieć kod HTML, w którym dodajemy obraz. Następnie tworzymy plik CSS, aby zastosować właściwości, aby nasz obraz przewrócił. Możemy odwrócić nasz wizerunek w dowolnym wybranym kierunku. Mamy kod Visual Studio, w którym musimy wykonać te przykłady. Tak więc otwieramy plik i wybieramy język jako „HTML” i tworzymy ten plik HTML. Następnie musimy tutaj wykonać jakiś kod, który jest podany na poniższym obrazku. Po wypełnieniu tego kodu musimy go zapisać.
Aby wyświetlić nagłówek na stronie, dodajemy „
”Tag. Następnie mamy akapit, a ten akapit jest wyświetlany obok nagłówka. Następnie wykonujemy główny kod, który dodaje kod obrazu. Dodajemy obraz po nagłówku i akapicie. Używamy znacznika „” i w jego „SRC”. Podajemy ścieżkę lub nazwę obrazu, który chcemy dodać. Ustawiamy jego wartość szerokości na „400”, a wartość wysokości na „300”. Ustawiamy również tę szerokość i wysokość w naszym pliku CSS. Teraz przeprowadzamy się, aby utworzyć nasz plik CSS, w którym używamy różnych właściwości, aby nasz obraz był obrazem odwracającym.
Używamy selektora obrazu „Hover”. Służy do wyboru obrazu, gdy kursor przesuwa się nad obrazem. „Webkit-transform” to właściwość CSS, która służy do przekształcenia obrazu w 2-D i 3-D. Możemy obrócić nasz obraz, używając tego. „Scalex” służy do obracania obrazu w kierunku poziomym. Ten kod obróci obraz poziomo, gdy przesuniemy kursor na ten obraz.
To jest oryginalny obraz przed przeniesieniem kursora na obraz. Kiedy unosimy się nad tym obrazem, obraca się w kierunku poziomym.
Obrócony obraz jest również pokazany następująco:
Tutaj widać, że obraz obraca się poziomo. Poprzedni obraz to obrócony obraz po przesunięciu kursora na obraz.
Przykład nr 2:
To jest plik HTML. Możesz zobaczyć, że dodaliśmy obraz tutaj w tym kodzie. Użyliśmy „domu.obraz png ”w tym przykładzie.
Ustawiamy obraz „szerokość” na „500px” i obraz „Wysokość” na „400px”. Następnie mamy obraz „zawieszony”, który „przekształca” obraz na osi poziomej, gdy kursor unosi się nad tym obrazem.
Wyjście:
Poprzedni obraz jest oryginalnym obrazem przed transformacją na osi poziomej. Poniższy obraz to obraz po transformacji, gdy przesuwamy kursor na obraz. Możesz łatwo zobaczyć różnicę między poprzednim obrazem a poniższym obrazem.
Przykład nr 3:
Tutaj wartości „szerokości” i „wysokości” są takie same, a obraz jest taki sam. Ale obracamy obraz pionowo po unoszeniu się nad obrazem. Używamy więc „Transform” i ustawiamy go na „Skalay (-1)”, aby obrócił nasz obraz w kierunku pionowym.
Teraz zobacz, że obraz obraca się w kierunku pionowym, gdy unosimy się na tym obrazie. Tutaj obraz jest pokazany w kierunku do góry nogami, który obraca się pionowo po unoszeniu nad tym.
Przykład nr 4:
W tym kodzie używamy dwóch wartości w „skali”. Używamy „transformacji”. W swojej „skali” przekazujemy dwie wartości „-1, -1”, które obraca obraz w kierunku pionowym i poziomym. Kiedy poruszamy myszą na tym obrazie, obraca się w obu kierunkach.
Zobacz, że obraz jest obracany zarówno na osi pionowej, jak i poziomej, gdy na nim unosimy się. Poprzedni obraz to obraz po unoszeniu się nad oryginalnym obrazem.
Przykład nr 5:
Ten przykład różni się od poprzednich przykładów. Tworzymy różne klasy DIV przy użyciu różnych nazwisk. Pierwsza klasa DIV nazywa się „Flip-Box”. Druga klasa DIV nazywa „Flip-Box-Inner”. A trzecia klasa DIV nosi nazwę „Flip-Box Front”. Po zdefiniowaniu wszystkich tych klas DIV umieszczamy obraz „Myimage.JPEG ”. Następnie tworzymy kolejny „div” o nazwie „Flip-Box-Back”. Teraz piszemy niektóre akapity w tym Div. Używamy wszystkich tych klas DIV w naszym pliku CSS.
Używamy „ciała” i „rodziny czcionki” do „Arial”. Następnie ustawiamy szerokość i wysokość pojemnika „Flip Box” odpowiednio na „600px” i „400px”. Teraz dodajemy „granicę” i ustawiamy ją na „1px” w szerokości z typem „solidnym”, abyśmy mogli pokazać, że gdy ten obraz się odwróci, wychodzi on z pudełka, gdy przesuwamy na nim kursor. Dodajemy „perspektywę” i ustawiamy ją na „1000px”. Używamy go, gdy musimy dodać do obrazu trochę trójwymiarowego efektu.
Teraz mamy kolejny pojemnik, który jest „innerką flip-box”. Ten pojemnik ustawia pozycję z przodu i tylną stronę obrazu. Ustawiamy „pozycję” na „względny” oraz „szerokość” i „wysokość” na „100px”. Używamy właściwości „przejścia” do kontrolowania prędkości animacji i ustawienia jej na „0.8s ”.
Następnie używamy „w stylu transformacji”, aby renderować obraz w trójwymiarowej przestrzeni. Ustawiliśmy to na „Zachowaj-3D”. Następnie mamy zawieszkę „Flip-Box”, więc kiedy unosimy się nad obrazem, porusza się on w kierunku poziomym, ponieważ używamy „transformacji” do „obracania” i ustawiamy go na „180DEG”. Mamy „flip-box-front” i „flip-box-back”. Następnie podajemy pozycję obu tutaj. Ustawiamy „pozycję” zarówno na „absolutne”. „Wysokość” i „szerokość” dla obu pojemników są ustawione odpowiednio na „100px” i „100px”. Ustawiamy również „Webkit-Backface-Visbibibity” na „ukryte”. Ta właściwość jest używana, gdy obracamy obraz i ustawiamy go tutaj, niezależnie od tego, czy użytkownik zobaczy tylną powierzchnię obrazu, czy nie.
Więc tutaj ukrywamy za pomocą „ukrytego” znacznika w tej właściwości. Teraz stylizujemy przednią stronę za pomocą pojemnika „Flip-Box Front”. Ustawiamy „kolor tła” na „#bbb” i „kolor” czcionki lub tekstu na „czarny”. Wreszcie, stylizujemy tylną stronę obrazu za pomocą „Flip-Box-Back”. Jego „kolor tła” jest ustawiony na „szary”, a czcionka „kolor” jest ustawiony na „biały”. Używamy właściwości „Transform” i ustawiamy jej wartość na „Rotatey (180Deg)”.
W wyjściu mamy wiele obrazów, w których można zauważyć obrót obrazu. Na ostatnim obrazie wyświetlana jest również tylna strona obrazu. Możesz zobaczyć, jak to się obraca, gdy unosimy się nad tym obrazem. Cały tekst, który napisaliśmy w kodzie HTML, pojawi się na tylnej stronie obrazu, gdy ten obraz się obraca po unoszeniu.
Wniosek
W tym przewodniku użyliśmy koncepcji Flip Image w CSS. Wykonaliśmy tutaj różne przecinające się przykłady. Przewróciliśmy nasz wizerunek w kierunku pionowym lub w kierunku poziomym lub w obu kierunkach po unoszeniu. Wykonaliśmy również jeden przykład, w którym obracamy nasz obraz w wysokości 180 stopni, gdy unosimy się nad obrazem. Użyliśmy właściwości CSS we wszystkich przykładach i wykonaliśmy wszystkie wyniki w tym przewodniku. Zobaczysz, jak obraz odwraca lub obraca się pionowo i poziomo.