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

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

1 个答案: