• 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 &deg;</div>

     

    Rotation d'un Div en CSS

    Vous pouvez bien entendu placer
    une image dans votre <div>

     

     

    Voici un exemple de div avec une rotation selon deux plans

     

    Dans 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.

    « Mettre une liste déroulante dans un article[CSS] Mettre des colonnes dans ses articles »

    Tags Tags : , , , ,
  • Commentaires

    1
    Samedi 25 Août 2012 à 12:23

    Pas mal ^^

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter