css - 隐藏背面可见性时取消图像变换/过渡

Question

我有一个盒子，点击它会翻转。里面还有一张悬停时放大的图片，如图 fiddle 所示。 .
问题是当我将鼠标移出或放回时，隐藏的图像上的缩放过渡会短暂显示。
My attempt修复它:

#box.flip:hover img{
    -webkit-transform: none;
}

但是这个在翻转过渡完成之前重置了图像，看起来很难看。

Answer 1

只需添加 z-index:

#box.flip .amount{
    -webkit-transform: rotateX(0deg);
    z-index:999;
}

http://jsfiddle.net/aJY34/3/