4

我有一个小提琴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");
  });

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

4

2 回答 2

5

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

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

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

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

于 2013-10-09T22:19:12.290 回答
3

干得好...

演示小提琴

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');
  });
于 2013-10-09T22:11:00.113 回答