Flip di immagine di sfondo CSS
In questa guida, faremo tutte queste tecniche di lancio utilizzando le proprietà CSS. Qui impareremo a conoscere l'immagine Flip in CSS usando proprietà diverse.
Esempio 1:
Per capovolgere l'immagine in CSS, dobbiamo avere il codice HTML in cui aggiungiamo l'immagine. Quindi, creiamo un file CSS per applicare le proprietà in modo che la nostra immagine si lanci. Possiamo capovolgere la nostra immagine in qualsiasi direzione di nostra scelta. Abbiamo il codice Visual Studio in cui dobbiamo eseguire questi esempi. Quindi, apriamo il file e selezioniamo la lingua come "HTML" e creiamo questo file HTML. Quindi, dobbiamo fare un po 'di codice qui che è riportato nella seguente immagine. Quando completiamo questo codice, dobbiamo salvarlo.
Per visualizzare l'intestazione sopra la pagina, aggiungiamo "
"Tag. Quindi abbiamo un paragrafo e questo paragrafo viene visualizzato accanto all'intestazione. Dopo questo, facciamo il codice principale che sta aggiungendo il codice di immagine. Aggiungiamo l'immagine dopo l'intestazione e il paragrafo. Usiamo il tag "" e nel suo "SRC". Diamo il percorso o il nome dell'immagine che vogliamo aggiungere. Abbiamo impostato il suo valore di larghezza su "400" e il suo valore di altezza su "300". Abbiamo anche impostato questa larghezza e altezza nel nostro file CSS. Ora ci spostiamo per creare il nostro file CSS in cui utilizziamo le diverse proprietà per rendere la nostra immagine un'immagine di lancio.
Usiamo il selettore "Hover" Immagine. Viene utilizzato per selezionare l'immagine quando il cursore si sposta sull'immagine. La "trasformata webkit" è la proprietà CSS che viene utilizzata per trasformare l'immagine in 2-D e 3-D. Possiamo ruotare la nostra immagine usando questa. Il "scalex" viene utilizzato per ruotare l'immagine nella direzione orizzontale. Questo codice ruoterà l'immagine in orizzontale quando spostiamo il cursore su questa immagine.
Questa è l'immagine originale prima di spostare il cursore sull'immagine. Quando ci libramo su questa immagine, ruota in direzione orizzontale.
L'immagine ruotata è anche mostrata di seguito:
Qui, puoi vedere che l'immagine ruota in orizzontale. L'immagine precedente è l'immagine ruotata dopo aver spostato il cursore sull'immagine.
Esempio n. 2:
Questo è il file HTML. Puoi vedere che abbiamo aggiunto un'immagine qui in questo codice. Abbiamo usato la "casa.Immagine png "in questo esempio.
Abbiamo impostato l'immagine "larghezza" su "500px" e l'immagine "altezza" su "400px". Dopo questo, abbiamo un'immagine "molare" che "trasforma" l'immagine sull'asse orizzontale quando il cursore si libra su questa immagine.
Produzione:
L'immagine precedente è l'immagine originale prima della trasformazione sull'asse orizzontale. L'immagine seguente è l'immagine dopo la trasformazione quando spostiamo il cursore sull'immagine. Puoi facilmente vedere la differenza tra l'immagine precedente e la seguente immagine.
Esempio #3:
Qui, i valori di "larghezza" e "altezza" sono uguali e l'immagine è la stessa. Ma ruotiamo l'immagine verticalmente dopo esserci passati sull'immagine. Quindi, utilizziamo la "trasformazione" e la imposta su "Scaley (-1)" in modo che ruoti la nostra immagine in direzione verticale.
Ora, vedi che l'immagine ruota nella direzione verticale quando ci libramo su questa immagine. Qui, l'immagine è mostrata in una direzione capovolta che ruota verticalmente dopo essersi librati su questo.
Esempio #4:
In questo codice, utilizziamo i due valori nella "scala". Usiamo la "trasformazione". Nella sua "scala", passiamo i due valori "-1, -1" che ruota l'immagine nelle direzioni verticali e orizzontali. Quando spostiamo il mouse su questa immagine, ruota in entrambe le direzioni.
Vedere che l'immagine è ruotata sia sull'asse verticale che orizzontale quando ci litighiamo sopra. L'immagine precedente è l'immagine dopo essersi spenta sull'immagine originale.
Esempio #5:
Questo esempio è diverso dagli esempi precedenti. Creiamo le diverse classi di div usando i nomi diversi. La prima classe Div si chiama "Flip-Box". La seconda classe Div è il nome "Flip-Box-Inner". E la terza classe Div si chiama "Flip-Box-Front". Dopo aver definito tutte queste classi DIV, abbiamo messo un'immagine chiamata "MyImage.jpeg ". Creiamo quindi un altro "div" con un nome "flip-box-back". Ora, scriviamo alcuni paragrafi in questo div. Usiamo tutte queste classi DIV nel nostro file CSS.
Usiamo il "corpo" e la "famiglie di carattere" a "Arial". Quindi, impostiamo la larghezza e l'altezza del contenitore "Flip Box" su "600px" e "400px", rispettivamente. Ora, aggiungiamo il "bordo" e lo impostiamo su "1px" nella sua larghezza con un tipo "solido" in modo da poter mostrare che quando questa immagine si sposta, esce dalla scatola quando spostiamo il cursore su di esso. Aggiungiamo la "prospettiva" e la imposta su "1000px". Lo usiamo quando dobbiamo aggiungere un effetto tridimensionale all'immagine.
Ora abbiamo un altro contenitore che è un "flip-box-sinner". Questo contenitore imposta la posizione della parte anteriore e del retro dell'immagine. Abbiamo impostato la "posizione" su "relativo" e la "larghezza" e "altezza" su "100px". Utilizziamo la proprietà "Transition" per controllare la velocità di animazione e impostarla su "0.8s ".
Dopo questo, usiamo lo "stile trasforma" per rendere l'immagine nello spazio tridimensionale. Lo abbiamo impostato su "Preserve-3D". Quindi, abbiamo un mouse "flip-box", quindi quando ci libramo sull'immagine, si muoverà nella direzione orizzontale poiché usiamo la "trasformata" per "ruotare" e imposti su "180DEG". Abbiamo "Flip-Box-Front" e "Flip-Box-Back". Quindi, diamo la posizione di entrambi qui. Abbiamo impostato la "posizione" per entrambi su "assoluto". "Altezza" e "larghezza" per entrambi i contenitori sono impostati su "100px" e "100px", rispettivamente. Abbiamo anche impostato il "WebKit-Backface-visibility" su "nascosto". Questa proprietà viene utilizzata quando ruotiamo l'immagine e la imposta qui se l'utente vedrà o no la faccia posteriore dell'immagine.
Quindi, qui, lo nascondiamo usando il tag "nascosto" con questa proprietà. Ora, modelliamo il lato anteriore usando un contenitore "flip-box-front". Abbiamo impostato il "colore di sfondo" su "#bbb" e il "colore" del carattere o del testo su "nero". Infine, modelliamo il retro dell'immagine usando il "flip-box-back". Il suo "colore di sfondo" è impostato su "grigio" e il carattere "colore" è impostato su "bianco". Usiamo la proprietà "trasforma" e impostiamo il suo valore su "Rotatey (180DEG)".
Nell'output, abbiamo più immagini in cui puoi notare la rotazione dell'immagine. Nell'ultima immagine, il lato posteriore dell'immagine viene visualizzato anche qui. Puoi vedere come ruota quando ci libramo su questa immagine. Tutto il testo che abbiamo scritto nel codice HTML apparirà sul lato posteriore dell'immagine quando questa immagine ruota dopo il mouse.
Conclusione
In questa guida, abbiamo usato il concetto di flip di immagini in CSS. Abbiamo eseguito i diversi esempi di intersezione qui. Abbiamo capovolto la nostra immagine nella direzione verticale o nella direzione orizzontale o in entrambe le direzioni dopo il mouse. Abbiamo anche eseguito un esempio in cui ruotiamo la nostra immagine a 180 gradi quando ci libramo sull'immagine. Abbiamo usato le proprietà CSS in tutti gli esempi e reso tutte le uscite in questa guida. Vedrai come l'immagine si lancia o ruota in verticale e in orizzontale.