.dicewrapperTopLeft {
	width: 0px;
	height: 0px;
	position: relative;
	transform-style: preserve-3d;
	
	transform: rotateX(-55deg) rotateY(45deg);
}
	
.frame1TopLeft{
	animation: rotateTopLeft 2s linear both;
}

.frame2TopLeft{
	animation: rotate2TopLeft 3s linear both;
}

.dicewrapperTopLeft .dice .front {
	/*transform: rotateY(0deg) translateZ(24.5px);*/
	transform: rotateY(180deg) translateZ(24.5px);
}

.dicewrapperTopLeft .dice .back {
	/*transform: rotateX(180deg) translateZ(30px);*/
	transform: translateZ(24.5px);
}


.dicewrapperTopLeft .dice .right {
	/*transform: rotateY(90deg) translateZ(24.5px);*/
	transform: rotateY(90deg) translateZ(24.5px);
}

.dicewrapperTopLeft .dice .left {
	/*transform: rotateY(-90deg) translateZ(24.5px);*/
	transform: rotateY(-90deg) translateZ(24.5px);
}

.dicewrapperTopLeft .dice .top {
	/*transform: rotateX(90deg) translateZ(30px);*/
	    transform: rotateX(-90deg) translateZ(24.5px);
}

.dicewrapperTopLeft .dice .bottom {
   /*transform: rotateX(-90deg) translateZ(24.5px);*/
       transform: rotateX(90deg) translateZ(24.5px);
}


.dicewrapperTopLeft .dicetopleft1{
	transform: rotateX(90deg) rotateZ(0deg);
}

.dicewrapperTopLeft .dicetopleft2{
	transform: rotateX(0deg) rotateZ(90deg);
}

.dicewrapperTopLeft .dicetopleft3{
	transform: rotateX(180deg) rotateZ(0deg);
}

.dicewrapperTopLeft .dicetopleft4{
	transform: rotateX(0deg) rotateZ(0deg);
}

.dicewrapperTopLeft .dicetopleft5{
	transform: rotateX(0deg) rotateZ(-90deg);
}

.dicewrapperTopLeft .dicetopleft6{
	transform: rotateX(-90deg) rotateZ(0deg);
}

@keyframes rotate2TopLeft {
	0%{
		transform:rotateX(-55deg) rotateY(45deg) translate(0) rotate(-130deg) rotateY(65deg)
	}
	
	1%{
		transform:rotateX(-55deg) rotateY(45deg) translate(3px, -24px) rotate(-120deg) rotateY(60deg)
	}
	
	2%{
		transform:rotateX(-55deg) rotateY(45deg) translate(5px, -48px) rotate(-110deg) rotateY(55deg)
	}
	
	3%{
		transform:rotateX(-55deg) rotateY(45deg) translate(8px, -63px) rotate(-100deg) rotateY(50deg)
	}
	4%{
		transform:rotateX(-55deg) rotateY(45deg) translate(10px,-69px) rotate(-90deg) rotateY(45deg)
	}
	5%{
		transform:rotateX(-55deg) rotateY(45deg) translate(13px,-66px) rotate(-80deg) rotateY(40deg)
	}
	6%{
		transform:rotateX(-55deg) rotateY(45deg) translate(15px,-64px) rotate(-70deg) rotateY(35deg)
	}
	7%{
		transform:rotateX(-55deg) rotateY(45deg) translate(17px,-43px) rotate(-60deg) rotateY(30deg)
	}
	8%{
		transform:rotateX(-55deg) rotateY(45deg) translate(20px,-13px) rotate(-50deg) rotateY(25deg)
	}
	9%{
		transform:rotateX(-55deg) rotateY(45deg) translate(22px,-20px) rotate(-40deg) rotateY(20deg)
	}
	10%{
		transform:rotateX(-55deg) rotateY(45deg) translate(24px,-30px) rotate(-30deg) rotateY(15deg)
	}
	11%{
		transform:rotateX(-55deg) rotateY(45deg) translate(26px,-32px) rotate(-20deg) rotateY(10deg)
	}
	12%{
		transform:rotateX(-55deg) rotateY(45deg) translate(28px,-25px) rotate(-10deg) rotateY(5deg)
	}
	13%{
		transform:rotateX(-55deg) rotateY(45deg) translate(30px,-10px) rotate(0deg) rotateY(0deg)
	}
	14%{
		transform:rotateX(-55deg) rotateY(45deg) translate(31px,-13px) rotate(0deg) rotateY(0deg)
	}
	15%{
		transform:rotateX(-55deg) rotateY(45deg) translate(33px,-15px) rotate(0deg) rotateY(0deg)
	}
	16%{
		transform:rotateX(-55deg) rotateY(45deg) translate(34px,-8px) rotate(0deg) rotateY(0deg)
	}
	17%{
		transform:rotateX(-55deg) rotateY(45deg) translate(36px,-9px) rotate(0deg) rotateY(0deg)
	}
	18%{
		transform:rotateX(-55deg) rotateY(45deg) translate(37px,-7px) rotate(0deg) rotateY(0deg)
	}
	19%{
		transform:rotateX(-55deg) rotateY(45deg) translate(38px,-7px) rotate(0deg) rotateY(0deg)
	}
	20%{
		transform:rotateX(-55deg) rotateY(45deg) translate(39px,-6px) rotate(0deg) rotateY(0deg)
	}
	21%{
		transform:rotateX(-55deg) rotateY(45deg) translate(39px,-6px) rotate(0deg) rotateY(0deg)
	}
	22%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	23%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	
	
	
	
	24%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	25%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	26%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	27%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	28%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	29%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	30%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	31%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	32%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	33%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	34%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	35%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	36%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	37%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	38%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	39%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	40%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	41%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	42%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	43%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	44%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	45%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	46%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	47%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	48%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	49%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	50%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	51%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	52%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	53%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	54%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	55%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	56%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	57%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	58%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	59%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	60%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	61%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	62%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	63%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	64%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	65%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	66%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	67%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	68%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	69%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	70%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	71%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	72%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	73%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	74%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	75%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	76%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	77%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	78%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	79%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	80%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	81%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	82%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	83%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	84%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	85%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	86%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	87%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	88%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	89%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	90%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	91%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	92%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	93%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	94%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	95%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	96%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	97%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	98%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	99%{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
	to{
		transform:rotateX(-55deg) rotateY(45deg) translate(40px,-6px) rotate(0deg) rotateY(0deg)
	}
}

@keyframes rotateTopLeft {
	0%{
		transform:rotateX(-55deg) rotateY(45deg)  rotate(-200deg) rotateY(100deg)
	}
	
	100%{
		transform:rotateX(-55deg) rotateY(45deg) rotate(-50deg) rotateY(0deg)
		
		
	}			
}