How to hide rotating image in half way

Question

The snippet is just rotating the given images. Actually aiming to hide the images when it is behind the front visible images.

Demo: https://codepen.io/athimannil/pen/EwpLXx

@keyframes turn {
  50% {
    transform: rotateX(5deg) rotateY(0.5turn);
  }
  100% {
    transform: rotateX(-5deg) rotateY(1turn);
  }
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

body .container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 700px;
}

body .container .carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 97px;
  margin-left: -70px;
  margin-top: -48.5px;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(0);
  animation: turn 20s infinite linear;
}

body .container .carousel .slide {
  position: absolute;
  width: 140px;
  height: 97px;
  user-select: none;
}

body .container .carousel .slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(2) {
  transform: rotateY(36deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(3) {
  transform: rotateY(72deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(4) {
  transform: rotateY(108deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(5) {
  transform: rotateY(144deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(6) {
  transform: rotateY(180deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(7) {
  transform: rotateY(216deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(8) {
  transform: rotateY(252deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(9) {
  transform: rotateY(288deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(10) {
  transform: rotateY(324deg) translateZ(280px);
}

<div class="container">
  <div class="carousel">
    <img src="http://via.placeholder.com/300x200?text=01" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=02" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=03" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=04" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=05" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=06" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=07" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=08" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=09" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=10" alt="" class="slide">
  </div>
</div>

Answer 1

You could use backface-visibility: hidden; which determines whether or not the back face of the element is visible when facing the user. If you want instead to apply other effects, like opacity fading or others, you could consider using JavaScript.

Answer 2

With backface-visibility: hidden;

The backface-visibility CSS property determines whether or not the back face of the element is visible when facing the user. The back face of an element is always a transparent background, letting, when visible, a mirror image of the front face be displayed.

^{MDN Reference}

Codepen Demo

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

body .container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 700px;
}

body .container .carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 97px;
  margin-left: -70px;
  margin-top: -48.5px;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(0);
  animation: turn 20s infinite linear;
}

body .container .carousel .slide {
  position: absolute;
  width: 140px;
  height: 97px;
  user-select: none;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

body .container .carousel .slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(2) {
  transform: rotateY(36deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(3) {
  transform: rotateY(72deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(4) {
  transform: rotateY(108deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(5) {
  transform: rotateY(144deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(6) {
  transform: rotateY(180deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(7) {
  transform: rotateY(216deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(8) {
  transform: rotateY(252deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(9) {
  transform: rotateY(288deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(10) {
  transform: rotateY(324deg) translateZ(280px);
}

@keyframes turn {
  50% {
    transform: rotateX(5deg) rotateY(0.5turn);
  }
  100% {
    transform: rotateX(-5deg) rotateY(1turn);
  }
}

<div class="container">
  <div class="carousel">
    <img src="http://via.placeholder.com/300x200?text=01" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=02" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=03" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=04" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=05" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=06" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=07" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=08" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=09" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=10" alt="" class="slide">
  </div>
</div>