3

私は CSS3 が初めてで、CSS3 を使用した 3D アニメーションに興味があります。質問があります。誰かが私を助けてくれることを願っています。クリックイベントを使わずにカードフリップ効果を作る方法はありますか? 私はそれについて多くのことを検索しましたが、私の経験では結果を出すことができませんでした. 助けてください。

4

1 に答える 1

2

css-transitionsこれは、Javascript をまったく使用せずに行うことができます。css 属性を使用し:targetてカードの状態を検出する

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

于 2013-05-09T16:06:06.983 に答える