Ruotare Immagini e Div con Css3
5 ottobre 2010 
Attraverso i CSS3 vedremo oggi come è possibile ruotare le immagini e i div con poche righe di codice.
Infatti fino a poco tempo fa per realizzare effetti del genere avremmo dovuto utilizzare javascript. Oggi invece grazie ai CSS3 tutto questo è possibile.
Vediamo cosa ci vuole per ruotare le immagini con il nuovo foglio di stile:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <title>Ruotiamo immagine</title> <style> img { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } </style> </head> <body> <img src="foto1.jpg"> </body> </html> |
Qua potete trovare l’esempio pronto è finito.
Ora vediamo come ruotare un div con tutto il suo contenuto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <title>Ruotiamo il box</title> <style> .boxruotato { width: 200px; height: 200px; background-color: #cc0000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } </style> </head> <body> <div class="boxruotato"></div> </body> </html> |
Semplice no? Alla prossima 
Potresti trovare interessante anche
e se avessi più immagini nel mio body?? queste verrebbero ruotate tutte. Come faccio in questo caso a ottenere la rotazione di quelle scelte da solamente??