分享一个非常有趣的纯css杂志封面折叠效果

<div class="jaffee-wrapper">
      <span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg');">
        <span class="a"></span>
        <span class="bc">
          <span class="b"></span>
          <span class="c"></span>
        </span>
        <img src="https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg">
      </span>
    </div>

.jaffee-wrapper {
    margin: 2em 0 4em;
    perspective: 60em;
    text-align: center;
}
.jaffee {
  position: relative;
  display: inline-flex;
  transform: rotateX(10deg); 
  transform-style: preserve-3d;
  cursor: grab;
}
.jaffee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  opacity: 0;
}
.jaffee .a,
.jaffee .b,
.jaffee .c {
  top: 0;
  display: inline-block;
  height: 100%;
  background-image: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
}
.jaffee .a {
  position: absolute;
  left: 0;
  width: 50%;
  background-position: 0 0;
}
.jaffee .bc {
  position: absolute;
  display: inline-flex;
  width: 50%;
  height: 100%;
  left: 50%;
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}
.jaffee .b,
.jaffee .c {
  position: relative;
  width: 50%;
  backface-visibility: hidden;
}
.jaffee .b {
  background-position: 66.666667% 0;
  transform-style: preserve-3d;
}
.jaffee .b:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: rotateY(180deg) translateZ(1px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.jaffee .c {
  background-position: 100% 0;
  transform-origin: left;
  transition: transform 2s;
}
.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) translateZ(-1px);
  transition: transform 2s;
}
.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg) translateZ(2px);
  transition: transform 3s;
}