Obróć obraz w źródle obrazu w HTML

Obrazy są istotną częścią stron internetowych, które przekazują pewne informacje i sprawiają, że strony internetowe są bardziej atrakcyjne. Ponadto użytkownicy mogą dodawać wiele rodzajów obrazów, w tym obrazy produktu, suwaki obrazowe i ilustratorów. Ponadto możesz zastosować na nich różne efekty, takie jak odwracanie lub obracanie. Te funkcje są specjalnie zastosowane do przykładowych obrazów obecnych w aplikacjach internetowych edytujących zdjęcia.

Ten post wyjaśni:

• Metoda 1: Jak obrócić obraz w źródle obrazu w HTML?
• Metoda 2: Jak obrócić obraz w HTML przy użyciu właściwości CSS?

Metoda 1: Jak obrócić obraz w źródle obrazu w HTML?

Aby obrócić obraz w źródle obrazu w HTML, użyj wbudowanego CSS bezpośrednio w źródle obrazu za pomocą podanych instrukcji.

Krok 1: Utwórz pojemnik „Div”
Po pierwsze, stwórz „div”Pojemnik z pomocą„”Tag i przypisz to„klasa”Atrybut o określonej nazwie.

Krok 2: Dodaj obraz
Następnie dodaj obraz, wykorzystując „”Tag wraz z„src" atrybut. Następnie przypisz nazwę obrazu lub adres URL obrazu jako „src" wartość:

Wynikowe wyjście pokazuje, że obraz został pomyślnie dodany:

Krok 3: Obróć obraz
Następnie, aby obrócić obraz w źródle obrazu, zastosuj wbudowane CSS za pomocą „styl”Atrybut wraz z właściwością CSS”Transform: Rotate (30Deg)". „„przekształcać”Służy do zastosowania transformacji do zdefiniowanego elementu. Istnieją cztery możliwe wartości transformacji: „obracać się”,„skala”,„przenosić", I "krzywy". Mówiąc dokładniej, „obracać się()„Funkcja jest wykorzystywana do obracania obrazu wokół płaszczyzny 2D:

Wyjście

Krok 3: Zastosuj styl na źródle obrazu za pomocą CSS
Użytkownicy mogą również zastosować inne właściwości CSS na źródle obrazu zgodnie z ich potrzebami. W tym celu uzyskaj dostęp do „.Źródło-img„Zajęć i zastosuj właściwości CSS w następujący sposób:

.źródło-img
szerokość: 100px;
Wysokość: 250px;
Margines: 100px;

Tutaj:

• „Szerokość” jest wykorzystywana do ustawiania szerokości elementu.
• Właściwość „wysokości” przydziela określoną wysokość elementowi.
• „Margin” służy do ustawienia pustej przestrzeni wokół elementu.

Wyjście

Metoda 2: Jak obrócić obraz w HTML przy użyciu właściwości CSS?

Użytkownicy mogą również obracać obraz za pomocą wbudowanego CSS. W tym celu można użyć wielu właściwości, takich jak „obracać się„Własność i„ „przekształcać" nieruchomość.

Postępuj zgodnie z podanymi przykładami, aby obrócić obraz za pomocą CSS:

• Przykład 1: Obróć obraz za pomocą właściwości „Rotate”
• Przykład 2: Obróć obraz za pomocą właściwości „Transform”

Przykład 1: Obróć obraz za pomocą właściwości „Rotate”
„„obracać się„Właściwość CSS jest wykorzystywana do obracania elementu zgodnie z ruchem wskazówek zegara wokół płaszczyzny 2D. Aby zastosować tę właściwość do obracania obrazu, sprawdź podane kroki.

Krok 1: Utwórz pojemnik „Div”
Utwórz pojemnik „div” za pomocą „”Tag i wstaw atrybut klasy o określonej nazwie.

Krok 2: Dodaj obraz
Następnie dodaj obraz za pomocą „”Tag wraz z„src" I "Alt”Atrybuty. Atrybut „Alt” służy do ustawienia alternatywnego tekstu dla obrazu:

Wyjście

Krok 3: Zastosuj właściwość „obracaj”
Teraz uzyskaj dostęp do klasy za pomocą selektora klasy i nazwy „.obracać się". Następnie zastosuj „margines”I„ „obracać się„ODNIESIENIE. Na przykład wartość „obracać się”Jest ustawiony jako„45 stopnia”:

.obracać się
Margines: 100px 50px;
ROTATE: 45DEG;

Wyjście wskazuje, że obraz jest pomyślnie obracany za pomocą „obracać się" atrybut:

Przykład 2: Obróć obraz za pomocą właściwości „Transform”
Uzyskaj dostęp do klasy za pomocą „.obracać się". Następnie zastosuj „margines" I "przekształcać" nieruchomości:

.obracać się
Margines: 100px 50px;
Transform: Rotate (320DEG);

Tutaj "przekształcać„Właściwość służy do przekształcenia obrazu. W naszym scenariuszu wartość jest ustalana jako „ROTATE (320DEG)". Gdzie "obracać się()”Jest funkcją używaną do obracania elementu:

Powyższe wyjście pokazuje, że obraz jest obracany na określonym kącie wokół płaszczyzny 2D.

Wniosek

Aby obrócić obraz w źródle obrazu w HTML, użytkownicy mogą korzystać z „styl”Atrybut i ustaw wartość jako„Transform: Rotate ()". Ponadto możesz również użyć osadzonego CSS do obrócenia obrazu w źródle obrazu za pomocą „obracać się" nieruchomości. W tym artykule podano procedury związane z obracaniem obrazu w źródle obrazu w HTML.