Question

我是CSS3的新手，我对它的3D动画很感兴趣。我有一个问题，希望有人可以帮助我。有没有办法在不使用点击事件的情况下制作卡片翻转效果？我已经搜索了很多关于它的信息，但是凭借我的经验不能产生结果。拜托，你能帮助我吗？

Answer 1

您可以使用css-transitions执行此操作，而不使用任何Javascript。使用:target css属性来检测卡的状态

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

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

1 个答案: