卡片动画Jquery和CSS

我假设您正在遵循本教程：http://desandro.github.io/3dtransforms/docs/card-flip.html

问题

您有四 （4） 个问题：

• 在你的CSS中，你应该有...
  • .contenitore-carta而不是.contenitorecarta.
  • .carta.flipped而不是.carta .flipped
  • .carta .back而不是.carta.back
• 在你的 JavaScript 中，以下内容应该从...
  • $(".carta img") $(".carta") .

此外，还需要添加以供应商为前缀的样式规则，以便转换可以在所有受支持的浏览器中工作。请参阅单独列表：前缀或Posthack以获取有关此内容的更多信息。

溶液

下面的代码应该可以正常工作。注意：我将班级名称从意大利语翻译成英语:)

$(".card").click(function() {
  $(this).toggleClass("flipped");
})

.container {
  width: 100px;
  height: 150px;
  position: relative;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition:    -moz-transform 1s;
       -o-transition:      -o-transform 1s;
          transition:         transform 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.card div {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="card">
    <div class="front">
      <img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
    </div>
    <div class="back">
      <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
    </div>
  </div>
</div>

我对你的CSS和JS做了一些更改，以实现你想要的效果。

1. 更改了 JS，因此它将一个类添加到父 .carta 中，以便可以根据状态的变化设置两个子项的样式
2. 修复了 CSS 中的"contentitore-carta"选择器 — 它缺少连字符
3. 我没有使用图像进行转换，而是将它们切换到使用父 .front， .backdivs。这不是成败，但转换往往与div 玩得更好。

认为这涵盖了它。更新了下面的代码。

$(".carta").click(function() {
  $(this).toggleClass("flipped");
})

.contenitore-carta {
  position: relative;
  width: 100px;
  height: 150px;
  perspective: 800px;
}
.carta {
  width: 100px;
  height: 150px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.carta .front,
.carta .back {
    display: block;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.carta .back {
  transform: rotateY(180deg)
}
.carta.flipped {
  transform: rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
  <div class="carta">
    <div class="front">
      <img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
    </div>
    <div class="back">
      <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
    </div>
  </div>
</div>

您想要的相同效果只是 toogle 而不是 rotateY

$(".carta img").click(function() {
   $('.front, .back').toggle(); 
});

.contenitorecarta {
  position: relative;
  width: 100px;
  height: 150px;
  perspective: 800px;
}
.carta {
  width: 100px;
  height: 150px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.carta img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.carta .back { display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
  <div class="carta">
    <div class="front">
      <img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
    </div>
    <div class="back">
      <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
    </div>
  </div>
</div>

由于已经给出了许多正确答案，我只是提出了一个具有简化标记和更少样式的解决方案，并在最新的Chrome和Firefox上进行了测试

http://codepen.io/anon/pen/rawWdJ

标记

<div class="card">
  <img class="front" src="http://placehold.it/120x150/F44/000.png&text=Front">
  <img class="back" src="http://placehold.it/120x150/44F/000.png&text=Back">
</div>

CSS

.card {
  position: relative;
  width: 120px;
  transform-style: preserve-3d;
  transition: 1s transform;
}
.card img {
  backface-visibility: hidden;
  position: absolute;
}
.card .back {
  transform: rotateY(180deg)
}
.card.flip {
  transform: rotateY(180deg) 
}

Js

$('.card').on('click', function() {
   $(this).toggleClass('flip');
});