javascript - 只是翻转效果实际翻转不应该发生

Question

我有一个具有背景图像的 div。当我单击 div 时，我希望它翻转，然后更改图像的 URL 以显示不同的图像。正在发生的问题是“翻转”的图像显示为镜像。我怎样才能避免这种情况？

CSS

.imgnew
{
 -webkit-transform-style:preserve-3d;
 -webkit-transition:all 1.0s linear;
 transform-style:preserve-3d;
 transition:all 1.0s linear

}

.transition
{
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);

}

JavaScript

$('div').add('')

笔记：

我有一个 div 元素，没有其他元素可以添加到 div 或包裹在它周围。

我正在为翻转添加这两个类。

Answer 1

尝试这样的事情

$(".imgnew").on('click', function() {  
   $(".imgnew").addClass("transition");   
    setTimeout(function(){  
       $(".imgnew").removeClass("transition");  
    }, 500);  
});

这将添加类，然后在过渡的中途将其删除。效果应该不明显，它看起来就像一个翻转，但生成的 div 仍然不会被镜像。

这是一个显示此效果的简单JSFiddle