Rotation d'un élément en CSS3 (rotate)

La propriété transform associé à l'argument rotate() permet d'obtenir une rotation de l'élément auquel elle est assigné. L'argument de rotate exprimé en degré (deg) correspond à la valeur de l'angle de rotation et peut être également négatif pour inverser l'angle de rotation. Selon le navigateur utilisé, il faut préfixer la propriété.

Exemple :
 transform:rotate(50deg);
-ms-transform:rotate(50deg); /* Internet Explorer */
-moz-transform:rotate(50deg); /* Firefox */
-webkit-transform:rotate(50deg); /* Safari et Chrome */
-o-transform:rotate(50deg); /* Opera */
 Note : les exemple ci-dessous affichent une image avec un degré d'inclinaison positif ou négatif. Si vous voyez l'image droite, c'est que votre navigateur ne prend pas en charge cette propriété.

Rotation avec un angle positif :
 .image-rotation-positif{
width:398px;
height:101px;
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* Internet Explorer */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari et Chrome */
-o-transform:rotate(10deg); /* Opera */
}
 Ce qui donne comme résultat :



Créer un site


Rotation avec un angle négatif :
 .image-rotation-negatif{
width:398px;
height:101px;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg); /* Internet Explorer */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari et Chrome */
-o-transform:rotate(-10deg); /* Opera */
}
Ce qui donne comme résultat :

Créer un site


Vous pouvez appliquer la transformation à presque n'importe quel tag HTML et vous amusez à conjuguer avec d'autres propriétés CSS comme le "hover" dans cet exemple .
.div-texte{
width:auto;
height:100px;
padding:5px;
margin:5px;
background-color:yellow;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* Internet Explorer */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari et Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.div-texte:hover{
color:white;
background-color:purple;
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari et Chrome */
-o-transform:rotate(360deg); /* Opera */
}
Voir/déposer un commentaire (0) | Signaler un problème