title: Stop cube rotation on mouse hover
body: <p>I somehow manage to create this. I created a cube, that rotate horizontally, when it is hovered, but i want it to stay at its current location when it is not hovered. Ive been searching this for awhile now, but I cant seem to find the answer.</p>
  
  <pre><code>&lt;html&gt;
  &lt;style&gt;
      .wrap {
          -moz-perspective: 800px;
          -webkit-perspective: 800px;
          perspective: 800px;
          -moz-perspective-origin: 50% 100px;
          -webkit-perspective-origin: 50% 100px;
          perspective-origin: 50% 100px;
      }
  
      .cube {
          position: relative;
          width: 200px;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          margin: 0 auto;
          margin-top: 30px;
      }
  
      .cube div {
          position: absolute;
          width: 200px;
          height: 200px;
      }
  
      .back {
          -webkit-transform: translateZ(-100px) rotateY(180deg);
          -moz-transform: translateZ(-100px) rotateY(180deg);
          background: orange;
          opacity: 0.5;
      }
      .right {
          -webkit-transform: rotateY(-270deg) translateX(100px);
          -moz-transform: rotateY(-270deg) translateX(100px);
          -webkit-transform-origin: top right;
          -moz-transform-origin: top right;
          background: yellow;
          opacity: 0.5;
      }
      .left {
          -webkit-transform: rotateY(270deg) translateX(-100px);
          -moz-transform: rotateY(270deg) translateX(-100px);
          -webkit-transform-origin: center left;
          -moz-transform-origin: center left;
          background: violet;
          opacity: 0.5;
      }
      .top {
          -moz-transform: rotateX(-90deg) translateY(-100px);
          -webkit-transform: rotateX(-90deg) translateY(-100px);
          -webkit-transform-origin: top center;
          -moz-transform-origin: top center;
          background: green;
          opacity: 0.5;
      }
      .bottom {
          -webkit-transform: rotateX(90deg) translateY(100px);
          -moz-transform: rotateX(90deg) translateY(100px);
          -webkit-transform-origin: bottom center;
          -moz-transform-origin: bottom center;
          background: blue;
          opacity: 0.5;
      }
      .front {
          -webkit-transform: translateZ(100px);
          -moz-transform: translateZ(100px);
          background: red;
          opacity: 0.5;
      }
  
      @-webkit-keyframes spin {
          from { -webkit-transform: rotateY(0); }
          to { -webkit-transform: rotateY(360deg); }
      }
  
      .cube:hover {
          animation: spin 5s infinite linear;
          -webkit-animation: spin 5s infinite linear;
          -moz-animation: spin 5s infinite linear;
      }
  
  &lt;/style&gt;
  &lt;body&gt;
      &lt;div class="wrap"&gt;
          &lt;div class="cube"&gt;
              &lt;div class="front"&gt;front&lt;/div&gt;
              &lt;div class="back"&gt;back&lt;/div&gt;
              &lt;div class="top"&gt;top&lt;/div&gt;
              &lt;div class="bottom"&gt;bottom&lt;/div&gt;
              &lt;div class="left"&gt;left&lt;/div&gt;
              &lt;div class="right"&gt;right&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Anynone can point me to the right direction? thank you very much,</p>