css转换-css 3D转换行为怪异，DIV变为空白

Question

Fiddle：http://jsfiddle.net/y7d4kkxz/

HTML:

<div class="app">
  <div class="content">
    <div class="wrapper">
      Content here.
      <button class="doit">...</button>
    </div>
  </div>
</div>

CSS：

.app {
  background: #003;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
}
.content {
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 500ms;
}
.menu-open .content {
  transform: translate3d(40%, 0px, 0px) scale3d(0.85, 0.85, 0);
}
.wrapper {
  margin: 5%;
}

JS:

$(function () {
  $('.doit').on('click', function () {
    $('.app').toggleClass('menu-open');
  });
});

Answer 1

scale3d(0.85, 0.85, 0)将元素的Z轴缩放到0，然后它将消失。你可以用1代替，但到目前为止，你似乎根本不需要3D转换：

.menu-open .content {
  transform: translateX(40%) scale(0.85);
}

更新的fiddle