CODEWITHSUNDEEP
csscss-transitionscss-transforms
CaptSaltyJack
CaptSaltyJack

Reputation: 16085

CSS 3D transform acting strange, DIV goes blank

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');
  });
});

Upvotes: 0

Views: 67

Answers (1)

Ry-
Ry-

Reputation: 225291

scale3d(0.85, 0.85, 0) will scale the Z axis of the element to 0, and it will disappear. You could use 1 instead, but it doesn’t look like you need 3D transformations at all up to this point:

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

Updated fiddle

Upvotes: 2

Related Questions