Question

我正在做一些涉及三副牌的事情。

我希望能够将牌从最远的甲板移动到中间甲板，并作为第一层甲板的最后一步。

移动和旋转工作正常，但是如果我添加一个translateZ，那么让“侧甲板”看起来像是在中间甲板后面由于某种原因我的旋转在从中间甲板到最左边的甲板时被镜像。

我尝试更改Z轴，在正值和负值之间切换，但无论如何都得到相同的结果。

我已经制作了一个简化的jsfiddle以显示我的意思。

HTML

<div class="cards">
  <div class="next-deck">
   <div class="card card-next">
     <div class="card-front">
     front
     </div>
     <div class="card-back">
       back
     </div>
   </div>
  </div>
</div>

CSS

.cards {
      width:  650px;
      border: 1px solid blue;
      position: relative;
      height: 200px;
      perspective: 800px;
    }

    .card {
      width: 75px;
      height: 100px;
      position: absolute;
      right: 0;
      top: 50px;
      transition: all ease 1s;
      transform-style: preserve-3d;
      transform: translateZ(-100px);
    }

    .card-active {
        transform: translateX(-50%) rotateY(-180deg);
    }

    .card-discarded {
        transform: translateX(-100%) rotateY(-360deg) translateZ(-100px);
    }

    .card-front, .card-back{
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .card-front{
      background: red;
    }

    .card-back{
      background: green;
      transform: rotateY(180deg);
    }

使用JS https://jsfiddle.net/58Lab2tf/41/

完成js小提琴

动画化translateZ使rotateY镜像

0 个答案: