Overflow hidden breaking translateZ

Question

Setup

I have three divs using CSS3 translations in all directions within a container div that is itself within an outer, fullscreen div. The outermost div, the full screen one, has perspective set on it.

HTML

<div class='outer'>
  <div class='container ofhidden'>
    <div class='item' id='item1'></div>
    <div class='item' id='item2'></div>
    <div class='item' id='item3'></div>
  </div>
</div>

CSS

.outer {
  perspective: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.outer .container {
  background-color: grey;
  width: 130%;
  height: 100%;
  padding: 1em;
}
.outer .container.ofhidden {
  overflow: hidden;
}
.outer .container .item {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.outer .container .item#item1 {
  background-color: green;
  transform: translate3d(10px, 10px, -10px);
}
.outer .container .item#item2 {
  background-color: goldenrod;
  transform: translate3d(10px, 10px, 0);
}
.outer .container .item#item3 {
  background-color: red;
  transform: translate3d(10px, 10px, 10px);
}

Problem

The div that contains the translated elements has overflow: hidden; set on it which disables or ignores the translation in the Z direction while not effecting the other directions.

Demo

Please see this pen http://codepen.io/aaron/pen/Ihrxj for the code and a button which toggles overflow: hidden; to demonstrate the effect.

For those not familiar with HAML, SCSS/Compass, or CoffeeScript, you can click on the name of the preprocessor next to HTML, CSS, and JS to see the generated code in the codepen.

Answer 1

I don't know why this is happening, but i can suggest a couple of workarounds.

An obvious solution is to set overflow: hidden; (if you really need it) on items (either with .item or .container > *, instead of applying it to the container.

Another option is to position items absolutely. It's not very handy but it might work out for your layout (you can position items absolutely relatively to the container).

In both cases transform3d won't be disabled/ignored.