In HTML/CSS, l'utente può aggiungere elementi diversi e incorporare immagini è uno di questi. Possono anche applicare diverse proprietà di CSS per rendere le pagine Web più attraenti, come immagini di sfondo rotanti, applicare i bordi, impostare l'opacità della pagina e molti altri. CSS fornisce anche un “trasformare"Proprietà utilizzata per applicare la trasformazione multidimensionale a un elemento.

Questo tutorial illustrerà:

• Come aggiungere l'immagine in un contenitore?
• Come ruotare l'immagine di sfondo nel contenitore?

Come aggiungere l'immagine in un contenitore?

Per aggiungere un'immagine a un contenitore, seguire i passaggi elencati.

Passaggio 1: inserire l'intestazione

Innanzitutto, aggiungi un intestazione usando "

"Tag nella pagina HTML. Quindi, inserire il “allineare"Valore attributo per l'impostazione dell'allineamento dell'intestazione al centro.

Passaggio 2: crea un contenitore di div

Successivamente, crea un ""Container e allocare gli attributi di classe" Image-Container "e" Allinea ".

Passaggio 3: Aggiungi immagine in un contenitore di div

Quindi, inserire un “"Tag insieme ai seguenti attributi:

• IL "src"L'attributo specifica l'URL del file multimediale.
• "Al"Viene utilizzato per definire il testo per un'area specificata se l'immagine non viene visualizzata.
• "larghezza"Assegna la larghezza dell'immagine.
• "altezza"L'attributo definisce l'altezza dell'immagine.
• "stile"Viene utilizzato per specificare lo stile CSS, inclusi bordo e colore per elementi:

Immagine HTML

Produzione

Come ruotare l'immagine di sfondo nel contenitore?

Prova le istruzioni indicate di seguito per ruotare l'immagine nel contenitore.

Passaggio 1: container di accesso

In CSS, prima, accedi al "container di immagine"Classe con l'aiuto di un selettore punti.

Passaggio 2: ruotare l'immagine "30" gradi

Dopo aver acceduto al ""Container, applica le seguenti proprietà CSS:

.image-container
Trasformazione: ruotare (30DEG);
larghezza: 30%;
Altezza: 30%;
Size di sfondo: copertina;
Margine: 30px;

Qui:

• IL "trasformare"La proprietà viene utilizzata per ruotare il contenitore. Ad esempio, la funzione CSS "Ruota (30 gradi)"Specifica una trasformazione che ruota l'elemento verso un punto fisso sul piano 2D.
• "altezza"La proprietà assegna l'altezza a un elemento.
• "Size di sfondo"Assegna le dimensioni dello sfondo dell'elemento.
• "margine"La proprietà imposta lo spazio vuoto per un elemento sul lato esterno dell'elemento definito.

Si può osservare che l'immagine viene ruotata a 30 gradi del contenitore Div:

Passaggio 4: ruotare l'immagine "60" gradi

Per ruotare l'immagine a 60 gradi, impostare il valore di "ruotare()"Funzione come"60 gradi":

Trasformazione: ruotare (60 gradi);

Produzione

Questo post ha dichiarato la procedura per ruotare l'immagine di sfondo nel contenitore.

Conclusione

Per ruotare l'immagine nel contenitore, prima, crea un ""E aggiungi l'immagine utilizzando il""Tag. Quindi, accedi alla classe per applicare il "trasformare"Proprietà per ruotare l'immagine con il valore specificato. Gli utenti possono applicare altre proprietà CSS per modellare l'elemento, come "altezza","Size di sfondo", E "margine". Questo post ha dimostrato il metodo per ruotare l'immagine in un contenitore.