2

flipIt()画像を反転する機能があります。しかし、私がやりたいのは、ユーザーが画像をクリックしたときに動的な div (背景とテキスト) を作成し、画像が反転したときにその div が表示されるようにすることです。

このフィドルは機能していません。助けてください。
http://jsfiddle.net/RQ62f/13/

$("img").click(function(){
    alert('m called');
    $(this).wrap('<div class="foobar"/>');

    $(this).css("-webkit-transform-style","preserve-3d");
    $(this).css("-webkit-transition","all 1.0s linear");
    $(this).css("transform-style","preserve-3d");
    $(this).css("transition","all 1.0s linear");

    $(this).css("-webkit-transform","rotateY(180deg)");
    $(this).css("transform","rotateY(180deg)");
});
4

2 に答える 2

1

そこには多くのエラーがありました。これを試してください：http://jsfiddle.net/EhUp2/3/

クラスを追加してから、JS を介して大量の CSS を追加することを好みます。

マークアップ:

<div id="container">
 <div id="card">
  <div class="front face">
      <img src="http://placehold.it/450x280"/>
  </div>
</div>
</div>

CSS:

#container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 280px;
  z-index: 1;
}
#container {
    perspective: 1000px;
}
#card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  -webkit-transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
.back.face {
 display: block;
  -webkit-transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: red;
}

js:

$('#container').click(function(){

    $(this).children('#card').append("<div class='back face'><p>Text.</p></div>").addClass('flip');   

});
于 2013-05-07T08:21:13.603 に答える