Css

Résolu
Bonjour,

J'aimerais appliqué un style a une seule image de mon site mais j'y arrive pas :

<img class="img-responsive img-circle img-left" src="img/intro-pic.jpg">

img {
-moz-transition-duration:2s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
transition-duration:2s;
transition-timing-function:linear;
}

img:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}

j'ai essayé avec un id mais je n'y parvient pas...

merci

4 réponses

  1. Bonjour

    Voici le code correct

    css

    .rotate img {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
    -ms-transition: all 2s linear;
    transition: all 2s linear;
    -moz-transition-duration:2s;
    }
    .rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }

    html

    <div class="rotate">
    <img src="img/intro-pic.jpg">
    </div>

    Ou

    <a class="rotate">
    <img src="img/intro-pic.jpg">
    </a>

    Un petit merci vaut mieux qu'une grande ignorance
    1. Merci j'ai pu rajouter mes class :
      <div class="rotate">
      <img class="img-responsive img-circle img-left" src="img/intro-pic.jpg">
      </div>

      Merci
      Resolu
  2. j'ai répondu a quelqu'un sur un sujet semblable

    https://forums.commentcamarche.net/forum/affich-29334144-image-rotative-via-bouton-html-css-java#p29340519

    http://pour-ccm.zz.mu/ccm.html

    ׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
    1. il y a juste à adapter
    2. Oui mais je vais perdre le css de "img-responsive img-circle img-left" non ?
    3. donne voir la css de tes trois class
    4. .img-circle {
      border-radius: 50%;
      }

      .img-responsive {
      display: block;
      height: auto;
      max-width: 100%;
      }

      .img-left {
      float: none;
      margin: 0 auto 0;
      }

      C'est du boostrap casual
    5. animostab ta donné le bon code et je pense pas que tu perde ta css
  3. Oui mais comment car j'ai essayé de faire :
    <img class="img-responsive img-circle img-left rot" src="img/intro-pic.jpg">

    .rot {
    -moz-transition-duration:2s;
    -moz-transition-timing-function:linear;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function:linear;
    transition-duration:2s;
    transition-timing-function:linear;
    }

    .rot:hover {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }

    mais rien y fais...
    1. salut, dans ta CSS tu met img donc tu appelle toutes tes images

      il faut que tu utilise une de tes class

      ׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×