溢出隐藏破 translateZ

Question

设置

我有三个divs 在一个容器div 内的各个方向使用CSS3 翻译，该容器本身在一个外部全屏div 中。最外面的div，全屏的，上面设置了perspective。

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

问题

包含已翻译元素的div 上设置了overflow: hidden;，它禁用或忽略Z 方向的平移，而不影响其他方向。

演示

请参阅这支笔http://codepen.io/aaron/pen/Ihrxj 获取代码和切换overflow: hidden; 的按钮以演示效果。

对于不熟悉 HAML、SCSS/Compass 或 CoffeeScript 的人，您可以单击 HTML、CSS 和 JS 旁边的预处理器名称，以在 codepen 中查看生成的代码。

Answer 1

我不知道为什么会这样，但我可以提出一些解决方法。

一个明显的解决方案是在项目上设置overflow: hidden;（如果你真的需要它）（使用.item 或.container > *，而不是将其应用于容器。

另一种选择是绝对定位项目。它不是很方便，但它可能适合您的布局（您可以相对于容器定位项目）。

在这两种情况下，transform3d 都不会被禁用/忽略。