溢出隐藏破解translateZ

Question

建立

我有三个人div在容器内的所有方向上使用CSS3翻译,该容器div本身在外部全屏内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旁边的预处理器名称来查看代码集中生成的代码.

Answer 1

我不知道为什么会发生这种情况，但我可以建议一些解决方法。

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

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

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