Cubo em CSS

[Jeferson-x]

Ola pessoal, sou iniciante e estava "brincando" com um codigo de um cubo 3d em css... consigo alterar a rotação, mudar as cores, colocar imagens nas faces do cubo e etc mas alguém sabe como fazer para controlar o cubo com o mouse? tipo girar o cubo atraves do movimento do mouse e para-lo assim que for conveniente?

Segue abaixo o codigo.... Obrigado a todos.

body {

margin-top: 125px;

}

@-moz-keyframes spinningH {

from {

-moz-transform: rotateX(0deg) rotateY(0deg);

}

to{

-moz-transform: rotateX(360deg) rotateY(720deg);

}

}

@-webkit-keyframes spinningH {

from {

-webkit-transform: rotateX(0deg) rotateY(0deg);

}

to{

-webkit-transform: rotateX(360deg) rotateY(720deg);

}

}

@-o-keyframes spinningH {

from {

-o-transform: rotateX(0deg) rotateY(0deg);

}

to{

-o-transform: rotateX(360deg) rotateY(720deg);

}

}

@-ms-keyframes spinningH {

from {

-ms-transform: rotateX(0deg) rotateY(0deg);

}

to{

-ms-transform: rotateX(360deg) rotateY(720deg);

}

}

@keyframes spinningH {

from {

transform: rotateX(0deg) rotateY(0deg);

}

to{

transform: rotateX(360deg) rotateY(720deg);

}

}

#container {

-webkit-perspective : 1000px;

-moz-perspective : 1000px;

-o-perspective : 1000px;

-ms-perspective : 1000px;

perspective : 1000px;

-webkit-perspective-origin : 50% 50%;

-moz-perspective-origin : 50% 50%;

-moz-transform-origin : 50% 50%;

-o-perspective-origin : 50% 50%;

-ms-perspective-origin : 50% 50%;

perspective-origin : 50% 50%;

}

.animate {

-webkit-animation : spinningH 6s infinite linear;

-moz-animation : spinningH 6s infinite linear;

-o-animation : spinningH 6s infinite linear;

-ms-animation : spinningH 6s infinite linear;

animation : spinningH 6s infinite linear;

}

#cube {

position: relative;

margin: 0 auto;

height: 400px;

width: 400px;

-webkit-transition : -webkit-transform 2s linear;

-moz-transition : -moz-transform 2s linear;

-o-transition : -o-transform 2s linear;

-ms-transition : -ms-transform 2s linear;

transition : transform 2s linear;

-webkit-transform-style : preserve-3d;

-moz-transform-style : preserve-3d;

-o-transform-style : preserve-3d;

-ms-transform-style : preserve-3d;

transform-style : preserve-3d;

}

#cube>div {

position: absolute;

height: 360px;

width: 360px;

padding: 20px;

opacity: 2.9;

background-position:center center;

}

#cube div:nth-child(1) {

-webkit-transform : translateZ(200px);

-moz-transform : translateZ(200px);

-o-transform : translateZ(200px);

-ms-transform : translateZ(200px);

transform : translateZ(200px);

background-color:#000;

background-image:url(f1.png);

background-repeat : no-repeat;

}

#cube div:nth-child(2) {

-webkit-transform : rotateY(90deg) translateZ(200px);

-moz-transform : rotateY(90deg) translateZ(200px);

-o-transform : rotateY(90deg) translateZ(200px);

-ms-transform : rotateY(90deg) translateZ(200px);

transform : rotateY(90deg) translateZ(200px);

background-color:#000;

background-image:url(f2.png);

background-repeat : no-repeat;

}

#cube div:nth-child(3) {

-webkit-transform : rotateY(180deg) translateZ(200px);

-moz-transform : rotateY(180deg) translateZ(200px);

-o-transform : rotateY(180deg) translateZ(200px);

-ms-transform : rotateY(180deg) translateZ(200px);

transform : rotateY(180deg) translateZ(200px);

background-color :#000;

background-image:url(f3.png);

background-repeat : no-repeat;

}

#cube div:nth-child(4) {

-webkit-transform : rotateY(-90deg) translateZ(200px);

-moz-transform : rotateY(-90deg) translateZ(200px);

-o-transform : rotateY(-90deg) translateZ(200px);

-ms-transform : rotateY(-90deg) translateZ(200px);

transform : rotateY(-90deg) translateZ(200px);

background-color :#000;

background-image:url(f4.png);

background-repeat : no-repeat;

}

#cube div:nth-child(5) {

-webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

-moz-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

-o-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

-ms-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

transform : rotateX(-90deg) translateZ(200px) rotate(180deg);

background-color :#000;

background-image:url(f5.png);

background-repeat :no-repeat;

}

#cube div:nth-child(6) {

-webkit-transform : rotateX(90deg) translateZ(200px);

-moz-transform : rotateX(90deg) translateZ(200px);

-o-transform : rotateX(90deg) translateZ(200px);

-ms-transform : rotateX(90deg) translateZ(200px);

transform : rotateX(90deg) translateZ(200px);

background-color :#000;

background-image:url(f6.png);

background-repeat :no-repeat;

text-align:center;

}

[atkins]

Olha eu não conheço muito css3 hehe, mas acredito que se você colcoar o código pra ele ficar rodando, e na hr que passar o mouse é só colocar blocked...