CSS se da cuenta del efecto de plegado del mouse de la imagen

1. Puntos de implementación

El plegado se realiza mediante múltiples elementos a nivel de bloque;
La imagen se presenta como imagen de fondo;
Establezca la misma imagen de fondo para cada elemento de nivel de bloque y controle el área mostrada a través de la posición de fondo (similar a Sprite);
Darse cuenta del efecto de plegado a través del atributo de transformación;
El tamaño de todo el paquete div es el tamaño original de la imagen. Si cambia el tamaño, debe ajustar el tamaño de fondo y otras propiedades para ajustar el tamaño de la imagen de fondo.

2. Pantalla de efectos

3. Código fuente

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hover-folder</title>
  <style>
    html,
    body,
    ul,
    li {
    
    
      margin: 0;
      padding: 0
    }

    ul {
    
    
      list-style: none;
      display: block;
    }

    body {
    
    
      width: 100%;
      height: 100vh;
    }

    .container {
    
    
      width: 100%;
      height: 100%;
      /* background-color: aqua; */
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(0.5);
    }

    .wrap {
    
    
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
      width: 1280px;
      height: 854px;
      font-size: 0;
      line-height: 0;
      position: relative;

    }

    .image {
    
    
      cursor: pointer;
    }

    .abs-wrap {
    
    
      height: 100%;
      width: 100%;
      /* top: 0;
      left: 0; */
      /* position: absolute; */
      z-index: 10;

    }

    .abs-wrap:hover>.abs:nth-child(2) {
    
    
      transform: matrix(0.8, -0.2, 0, 1, -1, 0);
    }

    .abs-wrap:hover>.abs:nth-child(3) {
    
    
      transform: matrix(0.8, 0.2, 0, 1, -53, -50);
    }

    .abs-wrap:hover>.abs:nth-child(4) {
    
    
      transform: matrix(0.8, -0.2, 0, 1, -105, 0);
    }

    .abs-wrap:hover>.abs:nth-child(5) {
    
    
      transform: matrix(0.8, 0.2, 0, 1, -157, -50);
    }

    .abs {
    
    
      transform-style: preserve-3d;
      transform-origin: left center;
      transition: .4s ease-in-out;
      width: 20%;
      height: 100%;
      /* background-color: rgba(0, 0, 0, .5); */
      display: inline-block;
      background-size: 100%;
      background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604ecb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D854');
    }

    .abs:nth-child(1) {
    
    
      background-position: 0% 0%;
    }

    .abs:nth-child(2) {
    
    
      background-position: 25% 0%;
    }

    .abs:nth-child(3) {
    
    
      background-position: 50% 0%;
    }

    .abs:nth-child(4) {
    
    
      background-position: 75% 0%;
    }

    .abs:nth-child(5) {
    
    
      background-position: 100% 0%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="wrap">
      <ul class="abs-wrap">
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>

      </ul>

    </div>

  </div>

</body>

</html>

CSS se da cuenta del efecto de plegado del mouse de la imagen

CSS se da cuenta del efecto de plegado del mouse de la imagen

1. Puntos de implementación

2. Pantalla de efectos

3. Código fuente

Supongo que te gusta