body {
  display: grid;
  place-items: center center;
  height: 100vh;
  overflow: hidden;
}
.scena {
  width: 200px;
  height: 200px;
  perspective: 700px;
  margin-bottom: 100px;
}
.scena.front {
  perspective-origin: -100% -100%;
}
.scena.back {
  perspective-origin: 200% 200%;
}
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.cube.front {
  transform: rotateY(0deg);
}
.cube.back {
  transform: rotateY(180deg);
}
.face {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 3px black solid;
  display: flex;
  flex-wrap: wrap;
}
.face .piece {
  border-radius: 5px;
  outline: 2px black solid;
  border: 1px black solid;
  width: calc(33.33% - 2px);
  height: calc(33.33% - 2px);
  display: grid;
  place-items: center center;
  font-size: 50px;
  font-family: sans-serif;
  cursor: pointer;
}
.face-front {
  transform: rotateY(0deg) translateZ(100px);
}
.piece.r {
  background: red;
}
.piece.g {
  background: green;
}
.piece.w {
  background: white;
}
.piece.o {
  background: orange;
}
.piece.b {
  background: blue;
}
.piece.y {
  background: yellow;
}
.face-left {
  transform: rotateY(-90deg) translateZ(100px);
}
.face-top {
  transform: rotateX(90deg) translateZ(100px);
}

.face-bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
.face-right {
  transform: rotateY(90deg) translateZ(100px);
}
.face-back {
  transform: rotateY(180deg) translateZ(100px);
}

.settings {
  margin-top: 50px;
}