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

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

CSS

.imgnew
{
-webkit变换样式：保留-3d；
-webkit转换：所有1.0线性；
变换样式：保留-3d；
过渡：所有1.0线性
}
.过渡
{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}

JavaScript

$（'div'）。添加（“”）

注意：

我有一个div元素，没有其他元素可以添加到div中或围绕它包装

---

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

试试这样的东西

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

这将添加类，然后在转换的中途删除它。效果不应该是明显的，它看起来只是一个翻转，但生成的div仍然是未镜像的

---

下面是一个简单的例子，展示了这种效果

请同时分享您的HTML代码。请更详细地改进问题。像“但由于翻转图像也是翻转”这样的问题对我来说没有意义。我想提高标题，但很难知道问题是什么is@mishik它们只是html主体中的简单divtag@MichaelDurrant尝试更新问题plz检查，当div为翻转时背景图像为翻转镜像。我不想颠倒效果。。如果您可以设置一个非常有用的JSFIDLE，我将为3D Transform翻转div