3d卡片与css的轻碰效果没有显示

Question

我有一个小提琴http://jsfiddle.net/nLhgT/ 我按照这里的说明http://davidwalsh.name/css-flip和http://desandro.github.io/3dtransforms/docs/card-flip.html当我翻转卡片时,只显示正面(翻转).我似乎无法得到背面展示.我在stackoverflow上读过类似的问题,说必须首先旋转背面.它确实在我的例子中最初旋转.

HTML

<ul>
    <li>
        <div class="container">
        <div class="card">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
        </div>
    </li>
</ul>

CSS

li { 
  width: 300px;
  height: 260px;
  position: relative;
  perspective: 800px;
  list-style-type: none;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg );
  transform: rotateY(180deg);
}
.card.flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

JS

  $(document.body).on('click', '.card', function() {
          console.log("CLICK");
    document.querySelector('.card').classList.toggle("flip");
  });

我的例子中唯一的区别是卡片在无序列表中.我打算列出这些卡片.但我认为这不会影响事情.

Answer 1

所以主要的问题是preserve-3dIE不支持.巨大的失败,但没有多少可以做到这一点.因此,您应该将变换应用于每个子元素,而不是整个卡.

我发现制作卡片翻转的最佳方法如下:

• 改变每个面孔.前面应默认为0,后面应为180.翻转时,它们应分别为180和360.
• 适用z-index于他们.可见面应该有10个,而隐藏面应该为0.这样可以确保正确的面部始终位于前面(即使在不支持转换的浏览器中)

这是我对你的小提琴的更新,显示工作卡翻转.