Edit in JSFiddle

// Simple box model
*,
*:before,
*:after {
  box-sizing: border-box;
}

.spacer {
  width: 100%;
  height: 400vh;
  display: block;
}

.viewport {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

// Screen rotate and scale
// ------------------------------------ /
// Set piece screen - wrapper
.set-piece-wrapper {
  width: 236px;
  height: 334px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 270px;
  z-index: 10;
}

// Set piece which rotates
.set-rotate {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #d0e1e9;
  border-radius: 10px
}

// Set piece which scales in
.set-screen {
  background-color: #b9d2d5;
  display: block;
  position: absolute;
  left: 50%;
  top: 65px;
  width: 300px;
  height: 204px;
  margin-left: -150px;
  border-radius: 6px;
  transform: scale(0);
  z-index: 2;
}

// Floor - Appears from the bottom of the scene
.floor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #383a45;
  transform-origin: bottom center;
  transform: scaleY(0);
  height: 50px;
  width: 100%;
  z-index: 5;
}

// Fred - Who slides in from the left
.fred {
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -310px;
  transform: translateX(-1000px);
  width: 310px;
  height: 445px;
  display: block;
  z-index: 2;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('https://waaffle.com/img/desk-chair.svg') no-repeat center center;
    background-size: cover;
    Œ
  }
}