Q:

Как реализовать на CSS смену двух DIV элементов (стоят друг за другом) поворотом вокруг оси Y

Хотелось понять как реализовать подобное 
https://exadel.com/services/mobile-app-development/
Поворот одного DIV и замена его вторым (невидимым в начале) на CSS?

A:

Надеюсь это то, что Вам нужно.

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #BBDEFB;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
  border-radius: 10px;
}

.front {
  background-color: #fff;
}

.back {
  background-color: #BDBDBD;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}
<div class="wrap">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

