body {
	background: #f8f9fa;
	overflow: hidden;
}

.scene {
	margin: 230px auto;
	width: 100px;
	perspective: 1000px;
	perspective-origin: 50% 50%;
}
@media (max-width: 500px) {.scene {transform: scale(.7);}}
@media (max-width: 400px) {.scene {transform: scale(.6);}}

.cube {
	position: relative;
	transform-style: preserve-3d;
	transform-origin: 50px 50px;
	transform: rotateY(-30deg) rotateX(-20deg) rotateZ(9deg);
}
.cube-layer {
	transform-style: preserve-3d;
	transform-origin: 50px 50px;
}
.cube-layer.turn {
	transition: transform .8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.cubie {
	transform-style: preserve-3d;
	transform-origin: 50px 50px;
}

.cubie-corner-position-0 { transform: translate3d(100px, -100px, 100px); }
.cubie-corner-position-1 { transform: translate3d(-100px, -100px, 100px) rotateY(-90deg); }
.cubie-corner-position-2 { transform: translate3d(100px, -100px, -100px) rotateY(90deg); }
.cubie-corner-position-3 { transform: translate3d(-100px, -100px, -100px) rotateY(180deg); }
.cubie-corner-position-4 { transform: translate3d(100px, 100px, 100px) rotateX(180deg) rotateY(90deg); }
.cubie-corner-position-5 { transform: translate3d(-100px, 100px, 100px) rotateX(180deg) rotateY(180deg); }
.cubie-corner-position-6 { transform: translate3d(100px, 100px, -100px) rotateX(180deg); }
.cubie-corner-position-7 { transform: translate3d(-100px, 100px, -100px) rotateX(180deg) rotateY(-90deg); }

.cubie-corner-orientation-0 {}
.cubie-corner-orientation-1 { transform: rotateY(-90deg) rotateX(90deg); }
.cubie-corner-orientation-2 { transform: rotateY(90deg) rotateZ(-90deg); }

.cubie-edge-position-0  { transform: translate3d(0px, -100px, 100px); }
.cubie-edge-position-1  { transform: translate3d(-100px, -100px, 0px) rotateY(-90deg); }
.cubie-edge-position-2  { transform: translate3d(100px, -100px, 0px) rotateY(90deg); }
.cubie-edge-position-3  { transform: translate3d(0px, -100px, -100px) rotateY(180deg); }
.cubie-edge-position-4  { transform: translate3d(0px, 100px, 100px) rotateX(180deg) rotateY(180deg); }
.cubie-edge-position-5  { transform: translate3d(-100px, 100px, 0px) rotateX(180deg) rotateY(-90deg); }
.cubie-edge-position-6  { transform: translate3d(100px, 100px, 0px) rotateX(180deg) rotateY(90deg); }
.cubie-edge-position-7  { transform: translate3d(0px, 100px, -100px) rotateX(180deg); }
.cubie-edge-position-8  { transform: translate3d(100px, 0px, 100px) rotateX(-90deg) rotateY(90deg); }
.cubie-edge-position-9  { transform: translate3d(-100px, 0px, 100px) rotateX(-90deg) rotateY(-90deg); }
.cubie-edge-position-10 { transform: translate3d(100px, 0px, -100px) rotateX(90deg) rotateY(90deg); }
.cubie-edge-position-11 { transform: translate3d(-100px, 0px, -100px) rotateX(90deg) rotateY(-90deg); }

.cubie-edge-orientation-0 {}
.cubie-edge-orientation-1 { transform: rotateX(-90deg) rotateY(180deg); }

.cubie-middle-r  { transform: translate3d(100px, 0px, 0px); }
.cubie-middle-l  { transform: translate3d(-100px, 0px, 0px); }
.cubie-middle-f  { transform: translate3d(0px, 0px, 100px); }
.cubie-middle-b  { transform: translate3d(0px, 0px, -100px); }
.cubie-middle-u  { transform: translate3d(0px, -100px, 0px); }
.cubie-middle-d  { transform: translate3d(0px, 100px, 0px); }





.cubie-face {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 4px;
	transform-style: preserve-3d;
}




.face-u { transform: rotateX(90deg)  translateZ(50px); }
.face-f { transform:                 translateZ(50px); }
.face-r { transform: rotateY(90deg)  translateZ(50px); }
.face-l { transform: rotateY(-90deg) translateZ(50px); }
.face-b { transform: rotateY(180deg) translateZ(50px); }
.face-d { transform: rotateX(-90deg) translateZ(50px); }

.cubie-sticker {
	background-image: url(stickers.svg);
	background-size: 600px 100px;
}
.sticker-u { background-position-x: 0; }
.sticker-f { background-position-x: -100px; }
.sticker-r { background-position-x: -200px; }
.sticker-l { background-position-x: -300px; }
.sticker-b { background-position-x: -400px; }
.sticker-d { background-position-x: -500px; }

.turn-u1, .turn-d3 { transform: rotateY(-90deg); }
.turn-f1, .turn-b3 { transform: rotateZ(90deg); }
.turn-r1, .turn-l3 { transform: rotateX(90deg); }
.turn-l1, .turn-r3 { transform: rotateX(-90deg); }
.turn-b1, .turn-f3 { transform: rotateZ(-90deg); }
.turn-d1, .turn-u3 { transform: rotateY(90deg); }
.turn-u2 { transform: rotateY(-180deg); }
.turn-f2 { transform: rotateZ(180deg); }
.turn-r2 { transform: rotateX(180deg); }
.turn-l2 { transform: rotateX(-180deg); }
.turn-b2 { transform: rotateZ(-180deg); }
.turn-d2 { transform: rotateY(180deg); }