Odwróć/odzwierciedla obraz poziomo + pionowo z CSS
Obrazy są niezbędnym i zabawnym elementem aplikacji. Przyczyniają się do projektu aplikacji i nadają jej piękny układ. Wiele nieruchomości oferowanych przez CSS jest korzystnych na różne sposoby. Mówiąc dokładniej, zapewnia funkcje, które umożliwiają regulację obrazu w dowolnym kierunku, takie jak odwracanie pionowo lub poziomo, obracającego się i więcej.
Ten zapis poprowadzi Cię, jak odwrócić lub odzwierciedlać obraz poziomo i pionowo z CSS.
Jak odwrócić/odzwierciedlać obraz poziomo i pionowo z CSS?
Istnieją różne metody, które można użyć do odwracania lub obracania obrazów w CSS. Omówimy następujące czynności:
- Metoda 1: Za pomocą „Transform: Scale ()" nieruchomość
- Metoda 2: Za pomocą „Transform: Rotate ()" nieruchomość
Metoda 1: Jak odwrócić/odzwierciedlić obraz w poziomie i pionowo za pomocą właściwości „transform: scale ()”?
„„Transform: Scale ()”Właściwość rozmiar obrazu w płaszczyźnie 2D. Skala () określa dwie wartości współrzędnych dla osi x i osi y. Ilość skalowania wykonanej w każdym kierunku zależy od jego współrzędnych. „„Transform: Scalex ()„Właściwość skaluje obraz poziomo.
Przykład
Dodaj dwa obrazy w pliku HTML. Pierwszy będzie utrzymywany jako oryginalny w całym przykładzie. Podczas gdy drugi zostanie zastosowany z właściwościami CSS:
- „„”Tag jest wykorzystywany do zawierania obrazu.
- „„src”Atrybut określa adres URL obrazu.
- „„Alt”Jest wykorzystywany do określenia tekstu, jeśli obraz nie ładuje się na stronie internetowej.
- „„szerokość”Atrybut ustawia szerokość obrazu.
- „„klasa”Jest ustawiony z nazwą, aby uzyskać dostęp do obrazu w CSS.
Oto kod HTML scenariusza, jak wspomniano wcześniej:
Początkowo strona internetowa będzie wyglądać tak:
Przykład 1: Odrzucanie obrazu w poziomie za pomocą właściwości „Transform: scalex ()”
W CSS dodaj „Transform: Scalex ()„Właściwość do skalowania obrazu w poziomie:
.Flip
Transform: Scalex (-1);
Wyjście
Przykład 2: Odrzucanie obrazu pionowo za pomocą właściwości „Transform: scaley ()”
Aby skalować obraz pionowo w CSS, użyj „Transform: Scaley ()" nieruchomość:
Transform: Scaley (-1);
Wyjście
Metoda 2: Jak odwrócić/odzwierciedlać obraz w poziomie i pionowo za pomocą właściwości „Transform: Rotate ()”?
CSS „Transform: Rotate ()”Obraca obraz wokół stałego punktu w płaszczyźnie 2D. Funkcja „rotatex ()” obraca obraz na osi x, a „rotatey ()” jest wykorzystywana do obracania się na osi y.
Przykład 1: Odrzucanie obrazu w poziomie za pomocą właściwości „Transform: Rotatey ()”
W CSS dodaj „przekształcać„Własność o wartości”Rotatey ()" w "trzepnięcie„Klasa, aby odwrócić obraz poziomo w”180" stopni:
Transform: Rotatey (180Deg);
Wyjście
Przykład 2: Odwracanie obrazu pionowo za pomocą właściwości „Transform: Rotatex ()”
Dodaj CSS "przekształcać„Własność o wartości”rotatex ()„Aby odwrócić obraz w pionie:
Transform: Rotatex (180Deg);
Wyjście
Jak odwrócić/odzwierciedlać obraz pionowo lub poziomo na zawisieniu?
Aby dowiedzieć się, jak odwrócić obraz pionowo lub poziomo na zawisie, wypróbuj następujące kroki.
Krok 1: Utwórz plik HTML
Najpierw wykonaj podane kroki, aby utworzyć plik HTML:
- Dodać "”Element i przypisz go klasa„Flip-box".
- Wewnątrz tej karty dodaj kolejny „” z klasą „Flip-Card".
- Następnie dodaj „”Tag za pomocą„src”,„Alt", I "styl”Atrybuty.
Oto kod HTML:
Krok 2: Stylowa klasa „Flip-Box”
„„.Flip-box”Służy do uzyskania dostępu do kontenera z klasą„Flip-box”:
.Flip-box
Pozycja: względny;
szerokość: 300px;
Wysokość: 300px;
Margines: Auto;
Właściwości wymienione w powyższym fragmencie kodu opisano poniżej:
- "pozycja„Własność o wartości”względny”Ustawia pozycję elementu zgodnie z jego obecną lokalizacją.
- „„szerokość" I "wysokość„Właściwości są wykorzystywane do ustawienia obszaru elementu.
- "margines”Właściwość dodaje przestrzenie wokół elementu.
Krok 3: Stylowa klasa „Flip-Card”
Teraz stygnij „Flip-Card" klasa:
.Flip-Card
Pozycja: absolutna;
szerokość: 100%;
Wysokość: 100%;
przejście: wszystkie 0.5s łatwość;
Opis powyższych właściwości jest wspomniany poniżej:
- "pozycja”Z„absolutny„Wartość ustawia lokalizację elementu w stosunku do prawie pozycjonowanego elementu.
- "przemiana”Własność dostosowuje powolny ruch elementów w określonym czasie trwania.
Krok 4: Element stylu „IMG”
„„„Element jest stylizowany z CSS”Radiusz graniczny" nieruchomość:
img
RADIUS BRAVES: 10px;
Tutaj "Radiusz graniczny„Właściwość ustawia rogi obrazu jako okrągłe.
Krok 5: Odwróć obraz pionowo na zawisie
Aby odwrócić obraz na zawisie, CSS ”:unosić się„Wykorzystano pseudoklasa:
.Flip-Box: Hover .Flip-Card
Transform: Rotatex (180Deg);
Wyjście
Krok 6: Odwróć obraz poziomo na zawisie
„„Transform: Rotatey ()„Własność można wykorzystać do odwrócenia obrazu w poziomie:
.Flip-Box: Hover .Flip-Card
Transform: Rotatey (180Deg);
Wyjście
Zebraliśmy podejścia do odwrócenia/odzwierciedlania obrazu poziomo i pionowo z CSS.
Wniosek
Aby odwrócić obraz w HTML, CSS „przekształcać„Własność z wartościami”skala()" I "obracać się()”Są wykorzystywane. „„scalex ()" I "Rotatey ()”Są dostosowywane do odwrócenia obrazu w poziomie. „„Scaley ()" I "rotatex ()”Są ustawione na odwrócenie obrazu pionowo. Aby dodać efekt zawisowywania, CSS „:unosić się„Zastosowana jest pseudoklasa. Ten post wyjaśnił wiele procedur dotyczących odwrócenia obrazu poziomo i pionowo w CSS.