TranslationZ取消轮换

Question

我正在尝试在网站中组合rotationY和translateZ，但似乎translateZ取消了旋转。

我创建了一个隔离我的问题的代码：http://codepen.io/3MO/pen/zNadrB

当我点击左侧显示时，该框显示其左侧，方法是添加一个特定的课程＆＃39; show-left＆＃39;。 然后我点击推回，通过添加＆＃39;推回＆＃39;将盒子推到后面。类。正面向后旋转，而div的类别现在显示为左推后推。＆＃39>。

css和javascript非常基础：

.show-left {
   transform: rotateY(90deg);
}

.push-back {
   transform: translateZ(-1000px);
}

在javascript方面：

window.onload = function () {
   $('#showLeft').on('click', function (event) {
        $('#mainBox').addClass('show-left');
   });

   $('#pushBack').on('click', function (event) {
        $('#mainBox').addClass('push-back');
   });
}

我做错了什么？ 谢谢！