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是我对你的小提琴的更新，显示工作卡翻转。

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

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

2 个答案: