3D Animated Dice
<html>
<head>
<title>Cube</title>
</head>
<body>
<div class="container" >
<div id="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
var rotationX =0,
rotationY =0,
x=0,y=0,
handler = "",
timer = 0,
timeCounter =0,
accelarationX =0,
accelarationY=0,
cube = document.getElementById('cube');
handler = setInterval(rotateY,1);
function startTime(){
timeCounter++;
}
function rotateY()
{
if(rotationX<360 || rotationY<360)
{
rotationX+= 0.1 * accelarationX;
rotationY+= 0.2 * accelarationY;
cube.style.webkitTransform = "rotateY("+rotationY+"deg) rotateX("+rotationX+"deg) translateZ(-200px)";
cube.style.transform = "rotateY("+rotationY+"deg) rotateX("+rotationX+"deg) translateZ(-200px)";
cube.style.Otransform = "rotateY("+rotationY+"deg) rotateX("+rotationX+"deg) translateZ(-200px)";
} else {
if(rotationX>=360){rotationX=0}
if(rotationY>=360){rotationY=0}
}
}
window.onmousedown = function(e){
x=0,y=0;
x= e.screenX;
y =e.screenY;
timer = setInterval(startTime,1);
}
window.onmouseup = function(e){
x = (x-e.screenX)/timeCounter;
y = (y-e.screenY)/timeCounter;
clearInterval(timer);
timeCounter=0;
timer =0;
accelarationX =x;
accelarationY =y;
console.log(x+" Vertical Movement "+y+" Horizontal movement");
}
html { background: url('http://i111.photobucket.com/albums/n131/silversoldier_real/wood-pat_zps98102fcb.jpg');}
.container {
margin: 300px;
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
display: block;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d; /*Σεταρισμα ως 3d αντικείμενο*/
-webkit-transform: translateZ(-500px) rotateY(0deg) rotateX(0deg);
-moz-transform: translateZ(-500px) rotateY(0deg) rotateX(0deg);
-o-transform: translateZ(-500px) rotateY(0deg) rotateX(0deg);
-ms-transform: translateZ(-500px) rotateY(0deg) rotateX(0deg);
transform: translateZ(-500px) rotateY(0deg) rotateX(0deg); /*αρχικό βάθος και αρχικές κλίσεις*/
}
#cube div {
background: url('http://i111.photobucket.com/albums/n131/silversoldier_real/sprite_zpsa8d8cd82.png') no-repeat;
width: 90px;
height: 90px;
display: block;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
#cube .front {
background-position: 0 0;
-webkit-transform: rotateY(0deg) translateZ(44px);
-moz-transform: rotateY(0deg) translateZ(44px);
-o-transform: rotateY(0deg) translateZ(44px);
-ms-transform: rotateY(0deg) translateZ(44px);
transform: rotateY(0deg) translateZ(44px);
}
#cube .back {
background-position: 0 -90px;
-webkit-transform: rotateY(0deg) translateZ(-44px);
-moz-transform: rotateY(0deg) translateZ(-44px);
-o-transform: rotateY(0deg) translateZ(-44px);
-ms-transform: rotateY(0deg) translateZ(-44px);
transform: rotateY(0deg) translateZ(-44px);
}
#cube .right {
background-position: 0 -180px;
-webkit-transform: rotateY(90deg) translateZ(-44px);
-moz-transform: rotateY(90deg) translateZ(-44px);
-o-transform: rotateY(90deg) translateZ(-44px);
-ms-transform: rotateY(90deg) translateZ(-44px);
transform: rotateY(90deg) translateZ(-44px);
}
#cube .left {
background-position: 0 -270px;
-webkit-transform: rotateY(-90deg) translateZ(-44px);
-moz-transform: rotateY(-90deg) translateZ(-44px);
-o-transform: rotateY(-90deg) translateZ(-44px);
-ms-transform: rotateY(-90deg) translateZ(-44px);
transform: rotateY(-90deg) translateZ(-44px);
}
#cube .top {
background-position: 0 -360px;
-webkit-transform: rotateX(-90deg) translateZ(-44px);
-moz-transform: rotateX(-90deg) translateZ(-44px);
-o-transform: rotateX(-90deg) translateZ(-44px);
-ms-transform: rotateX(-90deg) translateZ(-44px);
transform: rotateX(-90deg) translateZ(-44px);
}
#cube .bottom {
background-position: 0 -450px;
-webkit-transform: rotateX(90deg) translateZ(-44px);
-moz-transform: rotateX(90deg) translateZ(-44px);
-o-transform: rotateX(90deg) translateZ(-44px);
-ms-transform: rotateX(90deg) translateZ(-44px);
transform: rotateX(90deg) translateZ(-44px);
}