cube scss

.scenes-wrapper {
  background-color: red;
  @include perspective(100000000px);
  // @include perspective-origin(50% 50%);
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.scenes {
  position: relative;
  display: block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  @include clearfix;
  @include transform-style(preserve-3d);
  @include transform-origin(50% 0 0);
}

.scene {
  background: rgba(255, 0, 0, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  @include backface-visibility(hidden);

  &:nth-child(1) {
    @include transform(translateZ(800px));
  }
  &:nth-child(2) {
    @include transform(translateX(50%) rotateY(90deg));
  }
  &:nth-child(3) {
    @include transform(translateZ(-800px) rotateY(180deg));
  }
  &:nth-child(4) {
    @include transform(translateX(-50%) rotateY(-90deg));
  }
}