css - CSS3 - 不使用点击事件的 3D 卡片翻转动画

Question

我是 CSS3 的新手，我对使用它的 3D 动画很感兴趣。我有一个问题，希望有人可以帮助我。有什么方法可以在不使用点击事件的情况下制作卡片翻转效果？我对此进行了很多搜索，但以我的经验无法生成结果。拜托，你能帮帮我吗？

Answer 1

您可以完全使用css-transitionsJavascript 来做到这一点。使用:targetcss属性检测卡片状态

CSS

a {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  width: 135px;
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

a.unflip { display: none; }
div.card { position: relative; }

img { 
  position: absolute;
  width: 190px;
  height: 265px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

img.front { z-index: 1; }

img.back, div#flip:target img.front {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  z-index: 0;
}

div#flip:target a.flip { display: none; }
div#flip:target a.unflip { display: block; }

div#flip:target img.back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  z-index: 1;
}

HTML：

<div class='card' id='flip'>
    <a href='#flip' class='flip'>Flip that card</a>
    <a href='#unflip' class='unflip'>Flip that card</a>
    <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRZNrO98qaNGRBnMuuMctzqNMsE0DeUQXelgWi2zPsKYmjD-lqn' class='front' />
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSwcvrsqZZFqZYMPSfVGDomBaDbQc2b7A1i88kDA2P52k3VN0y7w' class='back' />
</div>

演示在这里：http: //jsbin.com/emolev/1/edit