嗯，我得到了一些类似的工作使用这个代码...

<div class="desktop">

    <div class="deck">
    
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est eos quam modi cumque placeat earum veritatis saepe itaque. Inventore aliquid quaerat numquam quasi, velit corrupti quam ad dolorum amet consectetur!</div>
        <div>Numquam pariatur laboriosam harum possimus dignissimos vero officiis officia, nisi excepturi mollitia magnam, quaerat maxime tenetur blanditiis sunt minus magni cupiditate consequatur unde reiciendis recusandae aspernatur esse deleniti ducimus! Nisi?</div>
        <div>Nam voluptas dolorum, alias expedita ea beatae! Non doloremque in blanditiis animi voluptatum itaque unde laboriosam quos veritatis nobis, ex quam odio est quibusdam voluptas modi, sit vitae. Nam, maiores.</div>
        <div>Dolorum, impedit nostrum doloremque dolorem ipsum saepe eos ut voluptates repudiandae vero omnis minima ex. Quasi temporibus excepturi praesentium in blanditiis ex laboriosam est odio suscipit ratione, necessitatibus esse enim.</div>
        <div>Nobis adipisci autem distinctio vero voluptas soluta aspernatur sequi non, illo, architecto ab modi accusamus? Soluta voluptatibus pariatur provident ad ratione corrupti minus! Mollitia doloremque voluptates doloribus sit dignissimos quibusdam?</div>
        <div>Placeat alias iste nobis, tempora sequi at dignissimos exercitationem facilis minus vel ducimus pariatur inventore? Consequuntur dolor, cumque, quis fugit nihil voluptates labore eligendi nobis enim, inventore fuga ducimus culpa.</div>
        <div>Incidunt rerum fuga vel at officiis maiores distinctio, dolore ex iusto quidem dolorem aut id quod, facere laudantium vero, blanditiis minima nostrum exercitationem quisquam recusandae! Nihil aliquid esse quisquam nesciunt.</div>
        <div>Mollitia labore, aut tenetur fuga ut deleniti excepturi maiores eum blanditiis explicabo, recusandae deserunt eius optio et voluptatum reiciendis sapiente repudiandae. Accusamus quibusdam, voluptas rem iste quis ab vitae. Reprehenderit.</div>
        <div>Possimus eaque sed in enim omnis sapiente id autem, numquam, a ab neque dolores commodi, pariatur quos nihil suscipit! Quibusdam doloremque quo eaque deserunt incidunt suscipit accusantium magni vero laborum.</div>
        <div>Hic nostrum distinctio aut iure! Aliquid minima explicabo est adipisci laudantium dignissimos consequatur deleniti doloremque ut, maxime minus tempora laborum corrupti, nostrum deserunt vitae voluptatem nam perspiciatis earum. Doloremque, sequi!</div>
    
    </div>

</div>

......用这个CSS ......

* {font-family: arial; font-size: 18px;}
.desktop {background-color: #052; padding: 20px; text-align: center;}
.deck div {
    border: 1px solid grey;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    width: 150px;
    height: 400px;
    overflow: hidden;
    background-color: white;
    box-shadow: -10px 0px 20px #333;
    padding: 10px;
    margin-left: 20px;
}
.deck div :first-child {margin-left: 0; }

.deck div:hover {left: -40px;}

没有重复的z轴或对卡类的引用。
公平地说，这有点混乱，但是可以达到你想要的效果。虽然可能有一百种更好的方法可以达到这个效果，但是我不是一个真正的CSSMaven。

• • 编辑**

只是为了补充这一点，要颠倒甲板的外观，只需更改数字的hover和margin-left，像这样...

.deck div {
    ...
    margin-left: -230px;
}

.deck div:hover {left: 30px;}

我对您的css做了一些更改，请检查这是否是您所期望的。

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17px, 1fr));
    margin-top: 8px;
    margin-bottom: 8px;
    transition: all 0.5s ease-in-out;
    grid-gap: 0px;
    width:100%;
    border: 2px solid green;
    border-radius: 8px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wrapper:hover {
      cursor: pointer;
      grid-gap: 1%;
}
  
.wrapper::-webkit-scrollbar {
          display: none;
}

.card {
    position: relative;
    height: 114px;
    width: 164px;
    flex-shrink: 0;
    background-color: red;
    border: 2px solid blue;
    border-radius: 8px;
}

.wrapper div:nth-child(n) {
      grid-row: 1 / 1;
}

<div class="wrapper">
    <div class="card" style="z-index:25"></div>
    <div class="card" style="z-index:24"></div>
    <div class="card" style="z-index:23"></div>
    <div class="card" style="z-index:22"></div>
    <div class="card" style="z-index:21"></div>
    <div class="card" style="z-index:20"></div>
    <div class="card" style="z-index:19"></div>
    <div class="card" style="z-index:18"></div>
    <div class="card" style="z-index:17"></div>
    <div class="card" style="z-index:16"></div>
    <div class="card" style="z-index:15"></div>
    <div class="card" style="z-index:14"></div>
    <div class="card" style="z-index:13"></div>
    <div class="card" style="z-index:12"></div>
    <div class="card" style="z-index:11"></div>
    <div class="card" style="z-index:10"></div>
    <div class="card" style="z-index:9"></div>
    <div class="card" style="z-index:8"></div>
    <div class="card" style="z-index:7"></div>
    <div class="card" style="z-index:6"></div>
    <div class="card" style="z-index:5"></div>
    <div class="card" style="z-index:4"></div>
    <div class="card" style="z-index:3"></div>
    <div class="card" style="z-index:2"></div>
    <div class="card" style="z-index:1"></div>
 </div>