css 不显示的 3d 卡片翻转效果

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

所以主要问题是 IE 不支持preserve-3d。巨大的无赖，但对此无能为力。因此，您应该将变换应用于每个子元素，而不是整个卡片。

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

• 变换每个面。正面默认为 0，背面默认为 180。翻转时，它们应分别为 180 和 360。
• 向他们应用z-index。可见的脸应该是 10，而隐藏的脸应该是 0。这样可以确保正确的脸始终在前面（即使在不支持转换的浏览器中）

Here 是我对您的 Fiddle 的更新，显示了工作卡翻转。

Answer 2

给你...

Demo Fiddle

HTML：

<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>

CSS：

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

JS：

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