Konstantinos-infogeek
11/6/2013 - 3:56 PM

3D Animated Dice

3D Animated Dice

3D Animated Dice.markdown
content_copyfile_download
  • Rendered
  • Source

A Pen by Konstantinos Tsatsarounos

A Pen by Konstantinos Tsatsarounos on CodePen.

License.

index.html
content_copyfile_download
<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>
script.js
content_copyfile_download
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");
			}
style.css
content_copyfile_download
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);
			}