.scene {
	margin: 70px auto;
	width: 30px;
	perspective: 1000px;
	perspective-origin: 50% 50%;
}

.cube {
	position: relative;
	transform-style: preserve-3d;
	transform-origin: 15px 15px;
	transform: rotateY(-30deg) rotateX(-20deg) rotateZ(9deg);
	-webkit-animation: rotate 120s infinite linear;
	animation: rotate 120s infinite linear;
}

@keyframes rotate {
	from {
		transform: rotateX(-30deg) rotateY(0deg);
	}

	to {
		transform: rotateX(330deg) rotateY(1800deg);
	}
}

.cube-layer {
	transform-style: preserve-3d;
	transform-origin: 15px 15px;
}

.cube-layer.turn {
	transition: transform .8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

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

.cubie-corner-position-0 {
	transform: translate3d(30px, -30px, 30px);
}

.cubie-corner-position-1 {
	transform: translate3d(-30px, -30px, 30px) rotateY(-90deg);
}

.cubie-corner-position-2 {
	transform: translate3d(30px, -30px, -30px) rotateY(90deg);
}

.cubie-corner-position-3 {
	transform: translate3d(-30px, -30px, -30px) rotateY(180deg);
}

.cubie-corner-position-4 {
	transform: translate3d(30px, 30px, 30px) rotateX(180deg) rotateY(90deg);
}

.cubie-corner-position-5 {
	transform: translate3d(-30px, 30px, 30px) rotateX(180deg) rotateY(180deg);
}

.cubie-corner-position-6 {
	transform: translate3d(30px, 30px, -30px) rotateX(180deg);
}

.cubie-corner-position-7 {
	transform: translate3d(-30px, 30px, -30px) 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, -30px, 30px);
}

.cubie-edge-position-1 {
	transform: translate3d(-30px, -30px, 0px) rotateY(-90deg);
}

.cubie-edge-position-2 {
	transform: translate3d(30px, -30px, 0px) rotateY(90deg);
}

.cubie-edge-position-3 {
	transform: translate3d(0px, -30px, -30px) rotateY(180deg);
}

.cubie-edge-position-4 {
	transform: translate3d(0px, 30px, 30px) rotateX(180deg) rotateY(180deg);
}

.cubie-edge-position-5 {
	transform: translate3d(-30px, 30px, 0px) rotateX(180deg) rotateY(-90deg);
}

.cubie-edge-position-6 {
	transform: translate3d(30px, 30px, 0px) rotateX(180deg) rotateY(90deg);
}

.cubie-edge-position-7 {
	transform: translate3d(0px, 30px, -30px) rotateX(180deg);
}

.cubie-edge-position-8 {
	transform: translate3d(30px, 0px, 30px) rotateX(-90deg) rotateY(90deg);
}

.cubie-edge-position-9 {
	transform: translate3d(-30px, 0px, 30px) rotateX(-90deg) rotateY(-90deg);
}

.cubie-edge-position-10 {
	transform: translate3d(30px, 0px, -30px) rotateX(90deg) rotateY(90deg);
}

.cubie-edge-position-11 {
	transform: translate3d(-30px, 0px, -30px) rotateX(90deg) rotateY(-90deg);
}

.cubie-edge-orientation-0 {}

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

.cubie-middle-r {
	transform: translate3d(30px, 0px, 0px);
}

.cubie-middle-l {
	transform: translate3d(-30px, 0px, 0px);
}

.cubie-middle-f {
	transform: translate3d(0px, 0px, 30px);
}

.cubie-middle-b {
	transform: translate3d(0px, 0px, -30px);
}

.cubie-middle-u {
	transform: translate3d(0px, -30px, 0px);
}

.cubie-middle-d {
	transform: translate3d(0px, 30px, 0px);
}

.cubie-face {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: rgba(0, 30, 60, 0.2);
	/*border-radius: 16px;*/
	transform-style: preserve-3d;
}

.face-u {
	transform: rotateX(90deg) translateZ(15px);
}

.face-f {
	transform: translateZ(15px);
}

.face-r {
	transform: rotateY(90deg) translateZ(15px);
}

.face-l {
	transform: rotateY(-90deg) translateZ(15px);
}

.face-b {
	transform: rotateY(180deg) translateZ(15px);
}

.face-d {
	transform: rotateX(-90deg) translateZ(15px);
}

.cubie-sticker {
	background-image: url(../image/stickers.svg);
	background-size: 600px 30px;
}

.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);
}