#theArt {
	width: 270px;
	height: 270px;
	position: relative;
	margin: 0 auto 40px;
	
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
}
#show-buttons {
	text-align:  center;	
}
#cube figure {
	display: block;
	position: absolute;
	width: 270px;
	height: 270px;
	border: 2px solid black;
}
#cube {
	width: 100%;
	height: 100%;
	position: absolute;
	
	-webkit-transform-style: preserve-3d;  /* gets the perspective and passes it to its childs */
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}
#cube .front {
	-webkit-transform: translateZ( 136px ); /* 136 is half of pic size plus the 2px frame */
	-moz-transform: translateZ( 136px );
	-o-transform: translateZ( 136px );
	transform: translateZ( 136px );
}
#cube .back {
	-webkit-transform: rotateX( -180deg ) translateZ( 136px );
	-moz-transform: rotateX( -180deg ) translateZ( 136px );
	-o-transform: rotateX( -180deg ) translateZ( 136px );
	transform: rotateX( -180deg ) translateZ( 136px );
}
#cube .right {
	-webkit-transform: rotateY( 90deg ) translateZ( 136px );
	-moz-transform: rotateY( 90deg ) translateZ( 136px );
	-o-transform: rotateY( 90deg ) translateZ( 136px );
	transform: rotateY( 90deg ) translateZ( 136px );
}
#cube .left {
	-webkit-transform: rotateY( -90deg ) translateZ( 136px );
	-moz-transform: rotateY( -90deg ) translateZ( 136px );
	-o-transform: rotateY( -90deg ) translateZ( 136px );
	transform: rotateY( -90deg ) translateZ( 136px );
}
#cube .top {
	-webkit-transform: rotateX( 90deg ) translateZ( 136px );
	-moz-transform: rotateX( 90deg ) translateZ( 136px );
	-o-transform: rotateX( 90deg ) translateZ( 136px );
	transform: rotateX( 90deg ) translateZ( 136px );
}
#cube .bottom {
	-webkit-transform: rotateX( -90deg ) translateZ( 136px );
	-moz-transform: rotateX( -90deg ) translateZ( 136px );
	-o-transform: rotateX( -90deg ) translateZ( 136px );
	transform: rotateX( -90deg ) translateZ( 136px );
}
#cube.show-front {
	-webkit-transform: tranlateZ(-136px);
	-moz-transform: tranlateZ(-136px);
	-o-transform: tranlateZ(-136px);
	transform: tranlateZ(-136px);
}
#cube.show-back {
	-webkit-transform: translateZ(-136px) rotateX(180deg);
	-moz-transform: translateZ(-136px) rotateX(180deg);
	-o-transform: translateZ(-136px) rotateX(180deg);
	transform: translateZ(-136px) rotateX(180deg);
}
#cube.show-right {
	-webkit-transform: translateZ(-136px) rotateY(-90deg);
	-moz-transform: translateZ(-136px) rotateY(-90deg);
	-o-transform: translateZ(-136px) rotateY(-90deg);
	transform: translateZ(-136px) rotateY(-90deg);
}
#cube.show-left {
	-webkit-transform: translateZ(-136px) rotateY(90deg);
	-moz-transform: translateZ(-136px) rotateY(90deg);
	-o-transform: translateZ(-136px) rotateY(90deg);
	transform: translateZ(-136px) rotateY(90deg);
}
#cube.show-top {
	-webkit-transform: translateZ(-136px) rotateX(-90deg);
	-moz-transform: translateZ(-136px) rotateX(-90deg);
	-o-transform: translateZ(-136px) rotateX(-90deg);
	transform: translateZ(-136px) rotateX(-90deg);
}
#cube.show-bottom {
	-webkit-transform: translateZ(-136px) rotateX(90deg);
	-moz-transform: translateZ(-136px) rotateX(90deg);
	-o-transform: translateZ(-136px) rotateX(90deg);
	transform: translateZ(-136px) rotateX(90deg);
}