Question

我有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)");
});

Answer 1

这对我有用Demo

$("img").click(function()
{
    var _this = $(this);
    _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)");
});

或者你可以做这样的事情

function _flipIt(image , div)
{
    var _this = image;
    _this.wrap(div);
    _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)");
}

$("img").click(function()
{
    _flipIt($(this) , '<div class="foobar"/>');
    // hide image
    $(this).css('visibility' , 'hidden');
});

Answer 2

那里你有很多错误。试试这个：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');   

});

使用jQuery翻转和注释图像

2 个答案: