* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #181c1f;
}

.jaffee-wrapper {
  /** 设置透视效果，用于创建 3D 视觉效果 */
  perspective: 60em;
}
.jaffee {
  position: relative;
  
  display: inline-flex;
  /* 
    * 绕 X 轴旋转 10 度，产生倾斜效果(前提是父元素设置了`perspective`)
    * 确保子元素位于 3D 空间中
  */
  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;
  left: 50%;

  display: inline-flex;
  width: 50%;
  height: 100%;
  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;
}