jquery - 转换图像然后动态旋转问题

Question

我正在尝试动态创建 div 外部图像，然后执行旋转。我已经编写了代码，但是图像翻转完成了，但我看不到 3D 旋转。

$(obj).css("-webkit-transform","rotateY(180deg)");
$(obj).css("transform","rotateY(180deg)");


var imgLeftPos = $(obj).position().left;
var imgTopPos = $(obj).position().top;

$(obj).wrap('<div class="f1_card"></div>');
$(obj).wrap('<div class="front face"></div>');
$(".f1_card").wrap('<div class="f1_container"></div>');
var div = $("<div class='back face'></div>");
$('.face').after(div);
$('.back').css("left",imgLeftPos+"px");
$('.back').css("top",imgTopPos+"px");
var arrId = parseInt(obj.id.substr(2));
console.log("arrId   = "+arrId)
window.setTimeout(function () {

    $(".back").html(imgArr[arrId]);
},900);

对于第二次单击，我已经编写了取消翻转图像的代码，并且我可以通过 3D 旋转看到该翻转。我的代码中的问题是什么？

Answer 1

我认为您正在尝试以错误的方式进行操作。

我建议您已经完成并测试了所有 CSS，然后使用您的脚本创建 div 并将其分配给您在 CSS 中定义的类。