Остановить вращение куба при наведении указателя мыши

Мне как-то удается создать это. Я создал куб, который вращается горизонтально, когда он завис, но я хочу, чтобы он оставался в своем текущем местоположении, когда он не зависал. Я искал это некоторое время, но я не могу найти ответ.Остановить вращение куба при наведении указателя мыши

<html> 
<style> 
    .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; 
    } 

</style> 
<body> 
    <div class="wrap"> 
     <div class="cube"> 
      <div class="front">front</div> 
      <div class="back">back</div> 
      <div class="top">top</div> 
      <div class="bottom">bottom</div> 
      <div class="left">left</div> 
      <div class="right">right</div> 
     </div> 
    </div 
</body> 
</html>

Anynone может указывать на меня в правильном направлении? Большое спасибо,

источник

2013-08-21 Karl Michael Linantud

'' тег отсутствует, а тег '