<div id="left"></div>
<div id="wrapper">
<div id="carousel">
<div class="imgBlock" id="freud"><img src="https://i.imgur.com/EeS8FIt.png" alt="" class="img floating">
</div>
<div class="imgBlock" id="user"><img src="https://i.imgur.com/AgR1VQr.png" alt="" class="img floating">
</div>
</div>
</div>
<div id="right"></div>

body {
  margin:0;
  padding:0;
  background:#a64833;
}

#wrapper {
  position:absolute;
  top:30%;
  left:50%;
  perspective:900px;
}
#left, #right {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  cursor:pointer;
}
#left {
  margin-left:-200px;
  width:0;
  height:0;
  border:0 solid transparent;
  border-top-width:25px;
  border-bottom-width:25px;
  border-right:40px solid #732f29;
}
#right {
  margin-left:200px;
  width:0;
  height:0;
  border:0 solid transparent;
  border-bottom-width:25px;
  border-top-width:25px;
  border-left:40px solid #732f29;
}
#carousel {
  transform-origin:center center center;
  transform-style:preserve-3d;
  transition:all 1s;
}
.imgBlock {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-150px;
  width:300px;
  height:200px;
  transform-style:preserve-3d;
  transform-origin:center center;
  z-index:2;
}
.imgBlock:hover .fa-heart {
  opacity:1;
  visibility:visible;
}
.img {
  width:inherit;
  height:inherit;
  object-fit:contain;
}
.fas {
  opacity:1;
  visibility:visible;
}
.imgBlock:nth-of-type(1) {
  transform:translate3d(0, 0, -400px) rotateY(0deg);
}
.imgBlock:nth-of-type(2) {
  transform:translate3d(0px, 0, 400px) rotateY(180deg);
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.fadein {
  visibility: visible;
  opacity: 1;
  transition: opacity .8s linear;
}

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .8s, opacity .8s linear;
}

.invisible {
  visibility: hidden;
  opacity: 0;
}
  
@keyframes floating {
    0% {
    transform: translate(0,  0px);
    filter: drop-shadow(0px 100px 40px rgba(0, 0, 0, 0.2));
  }
    50% {
    transform: translate(0, 15px);
    filter: drop-shadow(0px 85px 40px rgba(0, 0, 0, 0.3));
  }
    100% {
    transform: translate(0, 0px);
    filter: drop-shadow(0px 100px 40px rgba(0, 0, 0, 0.2));
  }    
}

var d = document,
left = d.getElementById("left"),
right = d.getElementById("right"),
carousel = d.getElementById("carousel"),
freud = d.getElementById("freud"),
user = d.getElementById("user"),
deg = 0,
flip = 0;
init();
left.addEventListener("click", function() {
  deg += 180;
  clicked();
  carousel.style.transform = "rotateY(" + deg + "deg)";
});
right.addEventListener("click", function() {
  deg -= 180;
  clicked();
  carousel.style.transform = "rotateY(" + deg + "deg)";
});

function init() {
  user.classList.add("invisible");
  user.classList.remove("fadein");
}

function clicked() {
  user.classList.remove("invisible");
  if (flip == true){
    freud.classList.add("fadein");
    freud.classList.remove("fadeout");
    user.classList.add("fadeout");
    user.classList.remove("fadein");
  } else {
    freud.classList.add("fadeout");
    freud.classList.remove("fadein");
    user.classList.add("fadein");
    user.classList.remove("fadeout");
  }
  flip = !flip;
}