Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS3 ha introdotto una nuova specifica per assegnare una rotazione alle immagini e agli elementi, la funzione rotate()
Vediamo una semplice struttura che incorpora la funzione rotate():
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div.rotate1
{
width:100px;
height:100px;
background-color:green;
/* Rotate div */
-ms-transform:rotate(15deg); /* motore trident -ms- IE 9 */
-moz-transform:rotate(15deg); /* motore mozilla -moz- Firefox */
-webkit-transform:rotate(15deg); /* motore webkit Safari e Chrome */
-o-transform:rotate(15deg); /* motore presto -o- Opera */
transform:rotate(15deg); /* generico */
}
div.rotate2
{
width:100px;
height:100px;
background-color:red;
/* Rotate div */
-ms-transform:rotate(45deg); /* motore trident -ms- IE 9 */
-moz-transform:rotate(45deg); /* motore mozilla -moz- Firefox */
-webkit-transform:rotate(45deg); /* motore webkit Safari e Chrome */
-o-transform:rotate(45deg); /* motore presto -o- Opera */
transform:rotate(45deg); /* generico */
}
</style>
</head>
<body>
<div align="center">
<div class="rotate1">Il contenuto del documento</div>
<div class="rotate2">Il contenuto del documento</div>
</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Analizziamo il codice:
transform:rotate(45deg) -> trasformazione:ruota(rotazione in gradi)
La rotazione in gradi in valore positivo determina una rotazione oraria, in valore negativo una rotazione antioraria.
Per garantire la compatibilità anche con i browser più datati è necessario specificare in serie le istruzioni specifiche per i vari motori di rendering come specificato in:
-ms-transform:rotate(45deg); /* motore trident -ms- IE 9 */ -moz-transform:rotate(45deg); /* motore mozilla -moz- Firefox */ -webkit-transform:rotate(45deg); /* motore webkit Safari e Chrome */ -o-transform:rotate(45deg); /* motore presto -o- Opera */ transform:rotate(45deg); /* generico */
