3d卡片翻转效果，css不显示在背面

我有一把小提琴 我按照这里的说明操作，当我翻转卡片时，只显示正面（翻转）。我似乎无法让背面显示出来。我在stackoverflow上读到过类似的问题，说必须先旋转背面。在我的示例中，它最初确实是旋转的

HTML

JS

我的示例中唯一的区别是，该卡位于无序列表中。我打算把这些卡片列一张清单。但我不认为这会影响事情。

给你

HTML:

JS:

---

因此，主要的问题是IE不支持

preserve-3d

，但对此无能为力。因此，您应该将转换应用于每个子元素，而不是整个卡

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

• 变换每个面。正面默认为0，背面默认为180。翻转时，它们应分别为180和360
• 对它们应用

  z索引。可见面应该有10，而隐藏面应该有0。这确保了正确的一个始终在前面（即使在不支持转换的浏览器中）

---

我对你的提琴的更新显示了一个工作卡片翻转。

我仍然看不到背面。奇怪……我可以在我的提琴中的chrome和firefox中看到背面。。。不管怎样，你的解决方案是可行的……所以harry可能会接受。也许是因为“让它在IE中工作，在所有其他浏览器中工作”一直是我的行动计划；）如前所述，IE不支持

preserve-3d

，因此它将前端扁平化并进行转换。为什么将香草

js

与

jQuery

混合使用，不是更好吗

$（'.card'）。toggleClass（“flip”）？因为我不能改变jQuery。就我个人而言，我只是想，但既然这不是回答这个问题的障碍，我就让它去吧。不管怎样，这将是
$（this）。toggleClass（“flip”）
，除非你只需单击其中一张卡，就想让每一张卡都翻转过来。这是迄今为止我找到的最佳答案。在演示中它很好而且简单。正如Niet指出的，我相信你确实需要在IE 10中分别翻转正面和背面，这就是我所做的！
<ul>
    <li>
        <div class="container">
        <div class="card">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
        </div>
    </li>
</ul>

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);
}

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

<ul>
    <li>
        <div class="container" id="flip-toggle">
            <div class="card">
                <div class="front">front</div>
                <div class="back">back</div>
            </div>
        </div>
    </li>
</ul>

li {
    width: 300px;
    height: 260px;
    position: relative;
    perspective: 800px;
    list-style-type: none;
}
.container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
}
#flip-toggle.flip .card {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter:"FlipH";
}
.container, .front, .back {
     width: 300px;
    height: 260px;
}
.card {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    background: red;
    z-index: 2;
}
.back {
    background: blue;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

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