body {
	
}

.angle {
	position: absolute;
	bottom: 10%;
	right: 10%;
	transform-style: preserve-3d;
	perspective: 300px;
}

.stage {
	transform-style: preserve-3d;
	animation: spin 20s infinite linear;
}

.box {
	position: absolute;
	transform-style: preserve-3d;
	width: 50px;
	height: 50px;
	top: calc(50vh - 25px);
	left: calc(50vw - 25px);
}

.line {
	position: absolute;
	transform-style: preserve-3d;
	transform: rotateX(var(--x)) rotateY(var(--y)) translateZ(0px);
}

.face {
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.line .face {
	background-color: black;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: 3px solid rgba(51,51,51,1);  
	width: 100vmax;
	height: 20px;  
}
/*front*/
.line .face:nth-child(1) { transform: rotateX(0deg) rotateY(0deg) translateZ(10px);}
/*back*/
.line .face:nth-child(2) { transform: rotateX(0deg) rotateY(180deg) translateZ(10px);}
/*top*/
.line .face:nth-child(3) { transform: rotateX(90deg) rotateY(0deg) translateZ(10px);}
/*bottom*/
.line .face:nth-child(4) { transform: rotateX(-90deg) rotateY(0deg) translateZ(10px);}

.box .face {
width: 50px;
height: 50px;
background-color: black;
/*border: 2px solid white;*/
}
.box .face:nth-child(1) { /*front*/
transform: rotateX(0deg)  rotateY(0deg)   translateZ(25px);
}
.box .face:nth-child(2) { /*back*/
transform: rotateX(0deg)  rotateY(180deg)   translateZ(25px);
}
.box .face:nth-child(3) { /*left*/
transform: rotateX(0deg)  rotateY(90deg)   translateZ(25px);
}
.box .face:nth-child(4) { /*right*/
transform: rotateX(0deg)  rotateY(-90deg)   translateZ(25px);
}
.box .face:nth-child(5) { /*top*/
transform: rotateX(90deg)  rotateY(0deg)   translateZ(25px);
}
.box .face:nth-child(6) { /*bottom*/
transform: rotateX(-90deg)  rotateY(0deg)   translateZ(25px);
}

@keyframes spin {
	from { transform: rotateX(0deg) rotateY(0deg); }
	to   { transform: rotateX(360deg) rotateY(360deg); }
}