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

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/