title: CSS 3 Rotate Animation on hover
body: <p>I have this code to make a rotation on hover. It doesn't work at all. What's is wrong with it?</p>
  
  <p><strong>I need the complete animation of the rotation for 360º</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon-style-1 .builder-element-icon {
      height: 100px;
      width: 100px;
      line-height: 100px;
      background: blue;
      line-height: 100px;
      text-align: center;
      margin: 0 auto;
      display: block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      color: white;
  }    
  
  .icon-style-1 .builder-element-icon:hover {
      background: green;
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="icon-style-1"&gt;
      &lt;span class="builder-element-icon fa fa-camera"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>