CSS ruota lo sfondo
Esempio # 01:
Iniziamo con questo script HTML con il semplice tag HTML di base seguito dal tag principale utilizzato per indicare la pagina web tramite il suo tag "Titolo". Il corpo del tag HTML è stato coperto con diversi elementi come Div ed etichette. Abbiamo due principali elementi Div in questo script HTML. All'interno di entrambi i principali elementi Div, abbiamo anche due tag "Div" dei bambini che sono specificati da due diverse classi A e B. Entrambi i tag DIV interni utilizzano l'elemento "etichetta" per etichettare un po 'di testo all'interno del "div" e specificare il div come normale o ruotato. Entrambe le etichette hanno ottenuto il bordo di 1px in stile tratteggiato mentre la prima etichetta Div sarebbe blu e la seconda sarebbe rossa.
Quando diamo un'occhiata al tag di stile, siamo venuti a sapere che entrambe le sezioni interiori "Div" sono disegnate separatamente usando le rispettive classi: A e B. Entrambi gli elementi Div utilizzano la stessa immagine di sfondo dal sistema senza ripetizione di sfondo, stessa altezza e stessa larghezza: 120px e 30px. Mentre il secondo div interiore avrebbe contenuto anche uno stile extra. Abbiamo usato la proprietà margin-top per posizionare questa sezione Div 100px lontana dalla parte superiore della pagina HTML e ruotarla di 90 gradi a destra usando la proprietà Transform.
Dopodiché, l'abbiamo ruotato di 45 gradi nella direzione opposta da dove è iniziata. Salviamo ed eseguiamo questo script ora.
L'output di seguito mostra una chiara rappresentazione del codice HTML sopra. La prima sezione Div contiene un'immagine con un'etichetta senza alcuna rotazione e non è stata ripetuta alcuna sfondo. L'altra sezione Div ha contenuto un'immagine e l'etichetta mentre è stata prima ruotata di 90 gradi e poi inclinata, tradotta e ridimensionando di 45 gradi verso la sua posizione originale.
Esempio # 02:
All'interno dell'esempio sopra, abbiamo ruotato le sezioni di div insieme alle loro immagini di sfondo e le etichette che contengono. Ora, esamineremo l'uso di proprietà diverse per ruotare l'immagine di sfondo con e senza il suo testo sulla pagina HTML. Il corpo di questa pagina HTML è stato riempito con una intestazione di diverse sezioni di div con alcuni testi. Tutti questi 4 Div sono stati specificati con diversi ID e classi per modellarli separatamente: ID "RotateImageonly" per il primo Div, classe "Ruota" per la seconda Div, classe "RotateTranslate" per la terza sezione Div e classe "Translaterateta" per la quarta sezione div. All'interno dell'elemento tag di stile, abbiamo usato l'elemento Div nello stesso stile per tutti e 4 gli elementi per alcune proprietà. Quindi, abbiamo specificato la posizione assoluta, imbottitura sinistra 40px, imbottitura superiore 100px, larghezza e altezza 100px per tutti, e l'immagine di sfondo sarebbe la stessa per tutti.
Mentre abbiamo usato l'ID del primo div in questo tag di stile per cambiare la sua posizione in parente, cambiando la larghezza e l'altezza e i margini sinistra. L'immagine di sfondo per il primo div non verrebbe annullata e più vecchia verrebbe utilizzata. L'immagine di sfondo per questa sezione div verrebbe ruotata di 45 gradi senza tradurre o ruotare il testo. Successivamente, tutte e tre le sezioni Div avrebbero prevalente la nuova immagine di sfondo.
La seconda sezione div è stata delineata 2px tratteggiata, ruotata di 45 gradi Il suo testo sarà anche tradotto da 200 pixel. L'immagine di sfondo della terza sezione div è stata ruotata di 90 gradi insieme al suo testo mentre la 4a sezione div è stata ruotata di 180 px insieme al suo testo.
L'output per questo script HTML ha mostrato un totale di 4 div con immagini di sfondo. Il primo Div è stato utilizzato le diverse immagini di sfondo mentre gli altri stanno preparando alle nuove immagini. L'immagine di sfondo della prima sezione div è stata ruotata a 45 gradi mentre il suo testo non è stato ruotato.
L'immagine di sfondo per il secondo div ha ruotato a 45 gradi mentre il suo testo è stato tradotto in 200 pixel. L'immagine di sfondo per la terza sezione div è stata ruotata a 90 gradi insieme al suo testo. Proprio così, l'immagine di sfondo per la quarta sezione è stata ruotata a 180 gradi e il suo testo è stato tradotto in 180 pixel.
Esempio # 03:
Cominciamo con l'ultimo esempio di questo articolo per utilizzare alcune proprietà di CSS sulle immagini di sfondo di alcuni elementi della pagina Web HTML. Daremo prima un'occhiata al corpo della pagina HTML. All'interno del tag del corpo per questa pagina HTML, abbiamo usato l'unica intestazione della taglia 1. Non è rimasto nulla da fare sul tag del corpo, quindi daremo un'occhiata al tag di stile della pagina HTML. All'interno del tag principale del codice HTML, esiste un tag del titolo che è stato utilizzato per indossarlo come "trasformazione dell'immagine di sfondo".
Questo tag di stile è stato avviato con l'uso di elementi del corpo. Per lo styling abbiamo utilizzato l'immagine di sfondo della proprietà per aggiungere l'immagine come sfondo. Abbiamo impostato lo sfondo su No-Ripeat in modo che l'immagine di sfondo non possa essere ripetuta sulla pagina Web HTML. Inoltre, la proprietà di attacco di sfondo viene utilizzata per correggere l'immagine di sfondo e il text-overflow è stato utilizzato per ereditare le proprietà complessive del contenuto in tutta la pagina. Un altro elemento del corpo è stato usato con l'attributo After per creare un'altra immagine di sfondo con posizione assoluta: margini superiori del 10%, margine sinistro del 30%, larghezza e altezza di 300 pixel insieme alla stessa immagine di sfondo contenente l'opacità.5.
Il raggio per il bordo di questa immagine è stato impostato al 50%. Ciò significa che questa immagine verrà mostrata in un cerchio. Inoltre, la sua immagine di sfondo verrà ruotata di 45 gradi e non è stata applicata alcuna proprietà di ripetizione di sfondo in modo che l'immagine possa essere ripetuta molte volte.
L'output ha mostrato la prima immagine di sfondo visualizzata semplicemente senza alcuna rotazione, senza alcuna traduzione e senza ripetere. Mentre la seconda immagine di sfondo è stata ruotata di 45 gradi con un raggio del 50% e l'immagine di sfondo viene ripetuta molte volte come mostrato nell'immagine sottostante.
Conclusione
Questo articolo costituisce l'uso di diverse proprietà CSS per ruotare le immagini di sfondo di qualsiasi pagina HTML a determinati gradi. Esempi HTML sono stati provati a utilizzare queste interessanti proprietà di CSS in un modo molto semplice e unico. Per questi esempi, abbiamo utilizzato la proprietà dell'immagine di background, la proprietà del ripetizione in background, la proprietà di attacco di fondo, la proprietà di testo suflow, il contenuto, la posizione, la proprietà del raggio di confine, la trasformazione, l'opacità e le diverse proprietà di larghezza/altezza per raggiungere il Output richiesto per ruotare lo sfondo.