3D倾斜图片列表布局特效

╰半橙微兮° 2023-02-28 05:27 12阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]  
css代码

.images-leaning { 
      box-sizing: border-box;
      width: 100%;
      min-width: 800px;
      margin: 10em auto 0;
      min-height: 330px;
      position: relative;
      background-repeat: no-repeat;
      background-image: linear-gradient(352deg, transparent 45.2%, #bbb 45.5%, #bbb 45.6%, #ccc 45.8%, #eee 60%), linear-gradient(30deg, #ccc, #eee 90%);
      background-size: 100% 32.4em;
      background-position: 50% 100%;
    }
    .images-leaning > div { 
      width: 250px;
      position: absolute;
      left: 50%;
      bottom: 7.8em;
      z-index: 0;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: end;
              justify-content: flex-end;
    }
    .images-leaning > div:before { 
      content: '';
      width: 60%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 7%;
      z-index: 1;
      background-repeat: no-repeat;
      background-image: linear-gradient(120deg, transparent 42%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.35) 65%), linear-gradient(20deg, transparent 38%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.23) 55%, rgba(0,0,0,0.13) 75%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.15) 3%, transparent 40%);
      -webkit-transform: rotate(-8deg);
              transform: rotate(-8deg);
    }
    .images-leaning > div:after { 
      content: '';
      width: 60%;
      height: 100%;
      position: absolute;
      z-index: 3;
      background-image: linear-gradient(45deg, rgba(0,0,0,0.3), transparent 70%), linear-gradient(45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.3) 80%);
      -webkit-transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
              transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
    }
    .images-leaning > div > img { 
      width: 60%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 2;
      border-left: 0.2em solid;
      -webkit-border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
           -o-border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
              border-image: linear-gradient(105deg, transparent 0.5%, #aaa 0.7%) 1;
      box-shadow: 0.1em 0.2em 0 -0.1em #666;
      -webkit-filter: saturate(90%);
              filter: saturate(90%);
      -webkit-transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
              transform: perspective(20em) rotateY(1deg) rotateZ(-5deg) skewY(-2deg) skewX(-1deg) scaleX(var(--resize));
    }
    .images-leaning > div:nth-of-type(4) { 
      --resize: 0.99;
      margin-left: -40.4em;
    }
    .images-leaning > div:nth-of-type(4):before { 
      background-size: 100% 85%, 100% 15%, 100% 10%;
      background-position: 0.1em 0, 0 100%, -3em 83%;
    }
    .images-leaning > div:nth-of-type(3) { 
      --resize: 0.96;
      margin-left: -15.3em;
      -webkit-transform: scaleY(0.98) translate(-8em, -2.1em);
              transform: scaleY(0.98) translate(-8em, -2.1em);
    }
    .images-leaning > div:nth-of-type(3):before { 
      background-size: 100% 84%, 100% 16%, 100% 10%;
      background-position: 0.4em 0, 0 100%, -3em 81%;
    }
    .images-leaning > div:nth-of-type(2) { 
      --resize: 0.925;
      margin-left: 10em;
      -webkit-transform: scaleY(0.965) translate(-17em, -4.2em);
              transform: scaleY(0.965) translate(-17em, -4.2em);
    }
    .images-leaning > div:nth-of-type(2):before { 
      background-size: 100% 83%, 100% 17%, 100% 10%;
      background-position: 0.6em 0, 0.1em 100%, -3em 81%;
    }
    .images-leaning > div:nth-of-type(1) { 
      --resize: 0.895;
      margin-left: 35.2em;
      -webkit-transform: scaleY(0.94) translate(-26.6em, -6.2em);
              transform: scaleY(0.94) translate(-26.6em, -6.2em);
    }
    .images-leaning > div:nth-of-type(1):before { 
      background-size: 100% 82%, 100% 18%, 100% 10%;
      background-position: 0.8em 0, 0.1em 100%, -3em 80%;
    }
    html, body { 
      min-height: 100vh;
      min-width: 800px;
    }
    body { 
      margin: 0 auto;
      padding: 0;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      -webkit-box-pack: justify;
              justify-content: space-between;
      background-color: #eee;
      font-size: 10px;
    }
    .images-basic { 
      width: 600px;
      padding: 5em 0;
      margin: 0 auto;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: justify;
              justify-content: space-between;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
              flex-direction: row-reverse;
    }
    .images-basic > div { 
      width: 130px;
    }
    .images-basic img { 
      width: 100%;
      display: block;
    }

html代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20230209/3dd158685d40490d92c067151d908599.png