Come applicare più trasformazioni in CSS?

Le immagini sono essenziali per esprimere informazioni e migliorare l'aspetto di una pagina web. Queste grafiche HTML sono utilizzate per la creazione di elementi visivi accattivanti, tra cui banner pubblicitari, disegni e altro ancora. Tuttavia, a volte, è necessario ruotare o capovolgere le immagini sulla pagina per soddisfare requisiti visivi specifici per l'azienda. A tale scopo, CSS consente ai suoi utenti di applicare più "trasformare"Proprietà sugli elementi HTML.

Questo commento dimostrerà:

• Come aggiungere/ inserire un'immagine in un div?




• Come applicare più trasformazioni in CSS?

Come inserire un'immagine in un div?

Per aggiungere/inserire un'immagine in un div, prova la procedura menzionata.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un contenitore Div utilizzando il ""Tag. Quindi, inserire un “id"Con un nome particolare.

Passaggio 2: crea un altro contenitore di div

Dopodiché, crea un altro contenitore di div. Inoltre, aggiungi un attributo di classe all'interno del tag DIV e specifica un nome di classe.

Passaggio 3: aggiungi l'immagine

Aggiungi un'immagine usando il “"Tag e aggiungi il seguente attributo menzionato come segue:

• "src"È utilizzato per aggiungere il percorso dell'immagine all'interno dell'elemento.
• "altezza"La proprietà viene utilizzata per specificare l'altezza dell'elemento definito.
• "larghezza"La proprietà definisce orizzontalmente la dimensione dell'elemento:

Si può osservare che l'immagine è stata aggiunta correttamente nel contenitore:

Ora, spostati verso la sezione successiva per applicare più trasformazioni sulle immagini in CSS.

Come applicare più trasformazioni in CSS?

IL "trasformare"La proprietà in CSS viene utilizzata per modificare lo spazio delle coordinate del modello di formattazione visiva. Inoltre, viene utilizzato per applicare vari effetti agli elementi scelti, come la rotazione, la traduzione e l'inclinazione. Prova le istruzioni dettagliate per applicare le numerose trasformazioni in CSS.

Per applicare le trasformazioni multiple in CSS, l'utente deve provare i seguenti passaggi.

Passaggio 1: accedi al primo div

#img-transform
Testo-align: centro;

Accedi al primo contenitore Div utilizzando il selettore con il nome ID "#IMG-Transform". Per farlo, il "allineamento"La proprietà viene utilizzata per allineare il contenitore Div in base al valore specifico.

Passaggio 2: applicare prima trasformata

Accedi al secondo contenitore Div con l'aiuto del selettore DOT e il nome della classe come ".primo ordine". Quindi, applica il "trasformare"Proprietà alla classe selezionata:

.primo ordine
Trasformazione: rotazione (90DEG) Translate (135px, 180px);

Secondo lo snippet di codice dato:

• IL "trasformare"La proprietà viene utilizzata per applicare una trasformazione 2D o 3D su un elemento definito. Questa proprietà consente all'utente di rotazione, ridimensionamento, muoversi e distorcere gli elementi.
• IL "ruotare()"Il valore della proprietà di trasformazione è una funzione in CSS che ruota l'elemento in base al valore specificato.
• IL "tradurre()"Il metodo sposta un elemento dalla sua posizione attuale (secondo i parametri indicati per l'asse X e l'asse Y).

Produzione

Passaggio 3: applicare la seconda trasformazione

Ora, accedi nuovamente al secondo contenitore Div e applica le seguenti proprietà menzionate elencate di seguito:

.primo ordine
Size di background: contenere;
trasformazione: rotare (-150deg);
Margine: 100px;

Qui:

• IL "Size di sfondo"La proprietà stabilisce sovrascrive il comportamento predefinito della piastrella dell'immagine e consente all'utente di scegliere la dimensione dell'immagine di sfondo di un elemento.

• Poi il "trasformare"La proprietà viene utilizzata per trasformare l'immagine in base alla condizione.
• Prossimo, "margine"Assegna lo spazio al di fuori del confine definito.

Produzione

Si trattava di applicare più trasformazioni in CSS.

Conclusione

Per applicare le trasformazioni multiple in CSS, in primo luogo, creare un contenitore div con ""Tag e aggiungi un ID all'interno del tag DIV. Quindi, crea un altro contenitore di div e inserisci una classe con un nome specifico. Successivamente, accedi a div e applica il "trasformare"Proprietà CSS e imposta il valore"Ruota (90)" grado. Quindi, ripeti di nuovo la stessa procedura per applicare l'altra trasformata. Questo post ha spiegato il metodo per applicare più trasformazioni in CSS.