-
Rotation d'un Div en CSS
Rien de tel qu'un exemple pour illustrer le sujet.
Vous pouvez voir ci-dessous un div de couleur cyan et à bords arrondis qui a été tourné de 20°
Voici un exemple de div avec une rotation de 20 °Pour réaliser ceci, il faut placer ce code dans la partie Ajouter du CSS (Menu Apparence -> Modifier le thème)
#monelem
{
border-radius: 5px 5px 5px 5px;/* on fait un arrondi sur les angles */
position:relative; /* on positionne le div à 150 px du bord gauche */
left: 250px;
font-size:18px; /* Taille des caractères */
width:150px; /* Largeur du div */
height:80px; /* Hauteur du div */
background-color:cyan; /* Couleur du div */
/* Rotation du div */
transform:rotate(20deg);
-ms-transform:rotate(20deg); /* Internet Explorer */
-moz-transform:rotate(20deg); /* Firefox */
-webkit-transform:rotate(20deg); /* Safari et Chrome */
-o-transform:rotate(20deg); /* Opera */
}Il ne reste plus qu'à placer votre balise div (que j'ai appelée monelem dans cet exemple) dans la partie HTML de votre article
<div id="monelem">Voici un exemple de div avec une rotation de 20 °</div>
Vous pouvez bien entendu placer
une image dans votre <div>Voici un exemple de div avec une rotation selon deux plansDans l'exemple ci-dessus, la méthode Rotate a été remplacée par la méthode Skew.
Voyez sur le site de W3School pour plus d'informations.
Tags : div, 20deg, transform, rotate, exemple
-
Commentaires
Pas mal ^^