<div class="content-box">
  <div class="container circle-clip">
    <div class="animated left face-img">
    </div>
    <div class="animated right face-img"></div>
  </div>

  <p><img src="https://i0.wp.com/francoismarais.com/wp-content/uploads/2020/01/face.jpg?w=602" alt="face image without split" width="300"></p>
  <p class="caption">Image without effect</p>
  <p>Photo by <a href="https://www.pexels.com/@mikoto-1502613?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels">Mikoto</a> from <a href="https://www.pexels.com/photo/shallow-focus-photo-of-woman-in-black-long-sleeved-shirt-3496542/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels">Pexels</a></p>
  
 <p>The effect uses a single image and dynamicly "splits" it into two sections. We then apply an animation to get a fake "3d" effect.</p>
  
  <p>created by <a href="https://francoismarais.com">Francois Marais</a></p>
</div>
.content-box {
  color: #fff;
  font-family: "Roboto", sans-serif;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(to bottom, rgb(54, 44, 70), rgb(97, 79, 138));
  padding-bottom: 1em;
}

.container {
  height: 602px;
  width: 100%;
  max-width: 602px;
  display: inline-block;
  position: relative;
}

.circle-clip {
  clip-path: circle(210px at center);
}

.left,
.right {
  height: 100%;
  position: absolute;
  width: 100%;
  perspective: 150px;
  transform-style: preserve-3d;
  transform: scaleX(0.88) scaleY(0.95);
}

.left {
  perspective-origin: left center;
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.right {
  perspective-origin: right center;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  margin-left: -1px;
}

.left::before,
.right::before {
  content: "";
  background-size: auto;
  background-position-y: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  transition: transform 0.5s ease-in-out;
}

.face-img::before {
  background: url("https://i0.wp.com/francoismarais.com/wp-content/uploads/2020/01/face.jpg?w=602");
  background-position: center;
}

.sign-img {
  transform: scale(0.6);
}

.sign-img::before {
  background: url("https://i2.wp.com/francoismarais.com/wp-content/uploads/2020/01/bg-t-1.png?w=602");
  background-position: 50%;
  background-size: cover;
  background-position: center;
}

.animated.left::before {
  animation: left-side 1.2s ease-in-out infinite;
  -webkit-animation: left-side 1.2s ease-in-out infinite;
  animation-direction: alternate;
}

.animated.right::before {
  animation: right-side 1.2s ease-in-out infinite;
  -webkit-animation: right-side 1.2s ease-in-out infinite;
  animation-direction: alternate;
}

.hover.left:hover::before {
  transform: rotateY(-3deg) scaleX(0.8);
}

.hover.right:hover::before {
  transform: rotateY(3deg) scaleX(0.8);
}

@keyframes left-side {
  0% {
    transform: rotateY(-3deg) scaleX(0.8);
  }

  100% {
    transform: rotateY(0deg) scaleX(1);
  }
}

@keyframes right-side {
  0% {
    transform: rotateY(0deg) scaleX(1);
  }

  100% {
    transform: rotateY(3deg) scaleX(0.8);
  }
}

a {
  color: #fffb00;
}
.caption {
  font-style: italic;
  font-size: 0.8em;
}
/*
The effect uses a single image and dynamicly "splits" it into two sections. We then apply an animation to get a fake "3d" effect.
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.