css3同时在不透明度和坐标上进行过渡

Question

我试图消除一个正在移动的div。 我在以下地址创建了一个带有4个按钮的codepen：http://codepen.io/3MO/pen/zNadrB - 左侧显示左侧显示 - 向后推推箱子（旋转90度后的TranslationX）。 - 重置允许恢复初始位置。 - 推回淡化与推回相同，但应该将不透明度调暗到0.5

这些类定义如下：

.push-back {
   transform: rotateY(90deg) translateX(1000px);
}

.push-back-fade {
   transform: rotateY(90deg) translateX(1000px);
   opacity:0.5;
 }

第二个css类根本不起作用，只有一面变得可见。为什么？

谢谢！