I CSS ruotano di 10 gradi in alto
Esempio 01
Iniziamo dimostrando come un elemento di HTML può essere ruotato di 90 gradi. Questo esempio è stato inizializzato con il principale tag "HTML" seguito dal tag "Head" che titola la nostra pagina Web HTML con il "CSS Ruota 90 gradi" nel tag "Titolo". L'elemento corporeo di questo codice HTML è stato inizializzato con l'intestazione della dimensione 1, i.e., La più grande titolo di HTML. È solo una semplice intestazione senza rotazione. Quindi, abbiamo una sezione "Div" che verrà anche posizionata normalmente nella schermata della pagina web HTML senza alcuna rotazione.
Un'altra sezione "Div" è stata usata qui con la classe specificata "ruotata". Entrambe le sezioni Div contengono un po 'di testo al loro interno, ma la seconda sezione "Div" verrà ruotata sullo schermo mentre la prima rimarrà normale. L'elemento "Body" è ora chiuso e siamo qui al tag "stile" per modellare questa pagina HTML. Entrambe le sezioni "div" sono state disegnate con larghezza e altezza di 100 pixel, con un po 'di colore del cielo di fondo. Successivamente, la classe "ruotata" è stata utilizzata per modellare il secondo div a 90 gradi usando la proprietà "trasforma" di CSS con il colore di sfondo rosso. A causa dell'uso del colore di sfondo sulla seconda "div" con la sua classe, il secondo colore sostituirà il primo colore in questa specifica sezione div. Salviamo questo codice ed eseguiamolo utilizzando il menu "Esegui" del codice Visual Studio.
Abbiamo ottenuto l'output di seguito per questo script HTML. Il primo div viene inserito normalmente sulla schermata del nostro browser senza alcuna rotazione. Mentre l'altro "div" viene ruotato di 90 gradi secondo la direzione e il posizionamento del suo testo usando l'attributo "trasforma" di CSS, i.e., dall'alto al basso.
Esempio 02
All'interno di questo esempio, utilizzeremo il metodo "Ruota" di trasformazione dell'attributo anziché il semplice metodo "Ruota" per ruotare un elemento specifico dello script HTML. Questa volta, abbiamo nuovamente utilizzato gli stessi tag HTML e "Head" che seguono lo stesso "titolo". L'area del corpo è stata inizializzata con la semplice intestazione della dimensione 1 seguendo un semplice tag di paragrafo contenente una riga di testo in essa. C'è stata inizializzata una normale sezione DIV nella pagina HTML, che mostra che non ci sarà alcuna rotazione applicata ad essa.
Un'altra sezione "Div" è stata inizializzata con il suo ID "ruotare", e conterrà una lunga frase che spiega che la funzione di rotazione è stata applicata a questo div per rotazione di 90 gradi. I tag corpo e HTML sono chiusi finora. Il tag di stile contiene lo styling per entrambi i tag "div", i.e., La larghezza di entrambi i tag DIV sarebbe di 210 pixel, l'altezza sarebbe 90 pixel, colore di sfondo giallo con un bordo marrone solido da 2 pixel per entrambi.
Dopo questo, abbiamo applicato l'attributo "rotatez" della proprietà di trasformazione nella seconda sezione Div usando l'ID di questa sezione, i.e., "ruotare". È stato usato per ruotare il particolare div a -9 gradi, i.e., Nella direzione opposta (z) dell'output di esempio sopra. La proprietà del colore di sfondo è stata nuovamente utilizzata per sovrascrivere l'ultimo colore di sfondo in stile per questa specifica sezione div, i.e., Sarà verde, non giallo, a causa della prevalenza. Questo esempio è stato completato qui ed è pronto per l'esecuzione nel browser Chrome.
L'output di questo esempio del codice HTML ha mostrato 1 sezione di intestazione, 1 paragrafo e 2 div sullo schermo del browser Chrome. Allo stesso tempo, la prima sezione div del colore di sfondo giallo è stata posizionata nella direzione sinistra a destra senza una rotazione di 1 gradi. D'altra parte, la sezione Green Div è stata ruotata di -90 gradi a sinistra, opposta all'uscita di semplici 90 gradi che verrebbero posizionati nella giusta direzione di una pagina HTML.
Esempio 03
Facciamo il nostro ultimo esempio di questo articolo per dimostrare l'uso di una semplice proprietà di trasformata per ruotare alcuni elementi HTML a 90 gradi con un piccolo cambiamento. Per questo, abbiamo iniziato questo script HTML con il tag principale HTML seguito dal tag Head. Questo tag principale contiene un tag titolo per titolo la pagina web HTML come "CSS ruota di 90 gradi" finora ancora una volta.
Dopo questo, abbiamo un tag di stile per modellare la pagina Web utilizzando diverse proprietà in stile CSS. Per il momento, dobbiamo saltare la sua spiegazione perché dobbiamo dare un'occhiata alla sezione del corpo di questa pagina web HTML prima di saltare allo stile. Quindi, la sezione del corpo contiene una semplice intestazione di dimensioni 1, i.e., La più grande titolo di HTML. Dopo questa intestazione, abbiamo una normale sezione DIV da creare nella nostra pagina web HTML e non verrà ruotato.
Successivamente, abbiamo un'altra sezione DIV da utilizzare nella pagina web HTML che verrà ruotata di 90 gradi riguardo alla direzione originale della pagina. È stato assegnato con la classe "ruotare" per l'uso nello stile. Dopo questo, ci siamo mossi verso la spiegazione del tag di stile per aggiungere un po 'di stile alla nostra pagina HTML. L'elemento "div" è stato usato qui per lo stile. Abbiamo impostato allineamento o imbottitura sinistra per entrambi i tag a 50px e allineamento superiore o imbottitura a 150px. La posizione per entrambe le sezioni di div è stata impostata su assoluto. La larghezza e l'altezza di entrambe le sezioni di divie sono le stesse i.e. 200px e 100px rispettivamente.
Dopo questo, abbiamo utilizzato la classe "ruotare" della seconda sezione div per modellarla anche separatamente. Abbiamo impostato il colore di sfondo per questa sezione Div su trasparente, i.e., Sovravidendo la proprietà di sopra in background. Abbiamo usato la proprietà del contorno anziché il bordo, i.e., uno schema tratteggiato da 5 px. Inoltre, la proprietà di trasformazione è qui per ruotare questa particolare sezione a 90 gradi. Esemiamo questo codice ora.
L'output per questo script HTML ci ha mostrato due elementi DIV in questa pagina; uno di colore giallo e l'altro è trasparente. La sezione di div giallo è normale nella sua posizione e non ruotata affatto. La sezione Div trasparente con uno schema tratteggiato è ruotata di 90 gradi.
Conclusione
Questo articolo ha dimostrato l'uso della proprietà trasformata di CSS con metodi diversi per ruotare qualsiasi elemento HTML di qualsiasi pagina Web a 90 gradi. Per questo, abbiamo provato un semplice attributo Ruotato per ruotare un elemento a 90 gradi e l'attributo rotez per ruotare un elemento a "-90" gradi, i.e., di fronte ai 90 gradi.