Ruota un'immagine nella sorgente dell'immagine in HTML

Le immagini sono una parte essenziale dei siti Web che trasmettono alcune informazioni e rendono le pagine Web più attraenti. Inoltre, gli utenti possono aggiungere più tipi di immagini, tra cui immagini di prodotto, cursori di immagini e illustratori. Inoltre, puoi applicare vari effetti su di essi, come capovolgere o ruotare. Queste funzionalità sono appositamente applicate alle immagini di esempio presenti nelle app Web di fotorizzazione.

Questo post spiegherà:

• Metodo 1: come ruotare un'immagine nella sorgente dell'immagine in HTML?
• Metodo 2: come ruotare un'immagine in HTML utilizzando le proprietà CSS?

Metodo 1: come ruotare un'immagine nella sorgente dell'immagine in HTML?

Per ruotare un'immagine nella sorgente dell'immagine in HTML, utilizzare i CS in linea direttamente nella sorgente dell'immagine con l'aiuto di istruzioni fornite.

Passaggio 1: crea un contenitore "div"
Prima di tutto, crea un "div"Container con l'aiuto del"”Tag e assegnarlo un"classe"Attributo con un nome specifico.

Passaggio 2: aggiungi l'immagine
Quindi, aggiungi un'immagine utilizzando il “Tag insieme al "src"Attributo. Quindi, assegna il nome dell'immagine o l'URL dell'immagine come "src" valore:

L'output risultante mostra che l'immagine è stata aggiunta correttamente:

Passaggio 3: ruotare l'immagine
Quindi, per ruotare l'immagine in una sorgente di immagine, applicare il CSS in linea con l'aiuto di “stile"Attributo insieme alla proprietà CSS"Trasformazione: rotazione (30deg)". IL "trasformare"Viene utilizzato per applicare la trasformazione all'elemento definito. Ci sono quattro possibili valori per la trasformazione: "ruotare","scala","mossa", E "storto". Più specificamente, il "ruotare()"La funzione viene utilizzata per ruotare l'immagine attorno a un piano 2D:

Produzione

Passaggio 3: applicare lo stile sulla sorgente dell'immagine usando CSS
Gli utenti possono anche applicare le altre proprietà CSS sulla fonte dell'immagine in base alle loro esigenze. A tale scopo, prima, accedi al ".fonte-img"Classe e applicare le proprietà CSS come segue:

.Source-img
larghezza: 100px;
Altezza: 250px;
Margine: 100px;

Qui:

• La "larghezza" viene utilizzata per l'impostazione della larghezza dell'elemento.
• La proprietà "altezza" assegna un'altezza specifica a un elemento.
• Il "margine" viene utilizzato per impostare lo spazio vuoto attorno all'elemento.

Produzione

Metodo 2: come ruotare un'immagine in HTML utilizzando le proprietà CSS?

Gli utenti possono anche ruotare l'immagine usando CSS incorporato. Proprietà multiple possono essere utilizzate per questo scopo, come il "ruotare"Proprietà e"trasformare" proprietà.

Seguire gli esempi forniti per ruotare l'immagine usando CSS:

• Esempio 1: Ruota l'immagine usando la proprietà "Ruota"
• Esempio 2: ruotare l'immagine usando la proprietà "trasforma"

Esempio 1: Ruota l'immagine usando la proprietà "Ruota"
IL "ruotare"La proprietà CSS viene utilizzata per ruotare l'elemento in senso orario attorno al piano 2D. Per applicare questa proprietà per ruotare l'immagine, controlla i passaggi dati.

Passaggio 1: crea un contenitore "div"
Crea un contenitore "div" usando il ""Tag e inserire un attributo di classe con un nome specifico.

Passaggio 2: aggiungi un'immagine
Quindi, aggiungi un'immagine con l'aiuto di "Tag insieme al "src" E "Al"Attributi. L'attributo "Alt" viene utilizzato per impostare il testo alternativo per l'immagine:

Produzione

Passaggio 3: applicare la proprietà "Ruota"
Ora, accedi alla classe utilizzando il selettore di classe e il nome ".ruotare". Quindi, applica il "margine" e il "ruotare"Proprietà su di esso. Ad esempio, il valore di "ruotare"È impostato come"45Deg":

.ruotare
Margine: 100px 50px;
Ruota: 45DEG;

L'output indica che l'immagine viene ruotata correttamente usando "ruotare"Attributo:

Esempio 2: ruotare l'immagine usando la proprietà "trasforma"
Accedi alla classe utilizzando ".ruotare". Quindi, applica il "margine" E "trasformare" proprietà:

.ruotare
Margine: 100px 50px;
Trasformazione: ruotare (320DEG);

Qui, il "trasformare"La proprietà viene utilizzata per trasformare l'immagine. Nel nostro scenario, il valore è impostato come "ruotare (320 gradi)". Dove "ruotare()"È una funzione utilizzata per ruotare l'elemento:

L'uscita sopra mostra che l'immagine viene ruotata sull'angolo specificato attorno al piano 2D.

Conclusione

Per ruotare l'immagine nell'origine dell'immagine in HTML, gli utenti possono utilizzare il “stile"Attributo e imposta il valore come"trasformazione: rotate ()". Inoltre, puoi anche usare il CSS incorporato per ruotare l'immagine nella sorgente dell'immagine con l'aiuto di "ruotare" proprietà. Questo articolo ha dichiarato le procedure relative alla rotazione dell'immagine nella sorgente dell'immagine in HTML.