html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.container {
  width: 340px;
  height: 300px;
  margin: auto;
  perspective: 700px;
  position: relative;
}

.container .card-one {
  background-color: orange;
  height: 100px;
  position: absolute;
  width: 100%;
}

.container .first-show {
  background-color: purple;
  height: 100px;
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
}

.container .first-behind {
  background-color: yellowgreen;
  height: 100px;
}

.container .second-show {
  background-color: palevioletred;
  height: 50px;
}

.container .five-container {
  background-color: #000;
  height: 50px;
}

.container .two-container {
  transform-style: preserve-3d;
  transform: rotate3d(1, 0, 0, -180deg);
  transform-origin: bottom;
  height: 100px;
}

.container .three-container {
  position: absolute;
  width: 100%;
  transform: rotate3d(1, 0, 0, -180deg);
  transform-origin: center;
  height: 100px;
  backface-visibility: hidden;
}