Question

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

setLocation('http://new.webhipster.dk/index.php/checkout/cart/add/uenc/aHR0cDovL25ldy53ZWJoaXBzdGVyLmRrL2luZGV4LnBocC9ob21lLWxlZnQ,/product/2/form_key/1Tfx79G6V33Q7l2Q/')会将元素的Z轴缩放为0，它将消失。您可以使用1代替，但到目前为止看起来您根本不需要3D转换：

scale3d(0.85, 0.85, 0)

Updated fiddle

CSS 3D变换表现奇怪，DIV空白

1 个答案: