@keyframes roll {
	from { transform: rotateX(0deg) rotateY(0deg) }
	to { transform: rotateX(-1080deg) rotateY(-270deg)}
}

.dice {
	/* position: absolute; */
	/*top: -100px; left: 50%;*/
	width: 50px;
	height: 50px;
	margin: 2em auto;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*transition: 2s linear;*/
}

.rolling{
	animation-name: roll;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.dice .face {
	background: url(../img/dice.png) no-repeat;
	background-size: 150px 100px;
	color: white;
	font-size: 20px;
	position: absolute;
	width: 50px;
	height: 50px;
	display: block;
}

.dice .front {
	-webkit-transform: perspective(000px) rotateX(0) translateZ(25px);
	-moz-transform: perspective(000px) rotateX(0) translateZ(25px);
	-ms-transform: perspective(000px) rotateX(0) translateZ(25px);
	-o-transform: perspective(000px) rotateX(0) translateZ(25px);
	transform: perspective(000px) rotateX(0) translateZ(25px);
}

.dice .back {
	background-position: -50px 0;
	-webkit-transform: perspective(000px) rotateY(180deg) translateZ(25px);
	-moz-transform: perspective(000px) rotateY(180deg) translateZ(25px);
	-ms-transform: perspective(000px) rotateY(180deg) translateZ(25px);
	-o-transform: perspective(000px) rotateY(180deg) translateZ(25px);
	transform: perspective(000px) rotateY(180deg) translateZ(25px);
}

.dice .left {
	background-position: -100px 0;
	-webkit-transform: perspective(000px) rotateY(90deg) translateZ(25px);
	-moz-transform: perspective(000px) rotateY(90deg) translateZ(25px);
	-ms-transform: perspective(000px) rotateY(90deg) translateZ(25px);
	-o-transform: perspective(000px) rotateY(90deg) translateZ(25px);
	transform: perspective(000px) rotateY(90deg) translateZ(25px);
}

.dice .bottom {
	background-position: 0 -50px;
	-webkit-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
	-moz-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
	-ms-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
	-o-transform: perspective(000px) rotateX(-90deg) translateZ(25px);
	transform: perspective(000px) rotateX(-90deg) translateZ(25px);
}

.dice .top {
	background-position: -50px -50px;
	-webkit-transform: perspective(000px) rotateX(90deg) translateZ(25px);
	-moz-transform: perspective(000px) rotateX(90deg) translateZ(25px);
	-ms-transform: perspective(000px) rotateX(90deg) translateZ(25px);
	-o-transform: perspective(000px) rotateX(90deg) translateZ(25px);
	transform: perspective(000px) rotateX(90deg) translateZ(25px);
}

.dice .right {
	background-position: -100px -50px;
	-webkit-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
	-moz-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
	-ms-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
	-o-transform: perspective(000px) rotateY(-90deg) translateZ(25px);
	transform: perspective(000px) rotateY(-90deg) translateZ(25px);
}