Question

设置

我有三个div在容器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旁边的预处理器名称，以查看代码集中生成的代码。

Answer 1

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

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

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

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

溢出隐藏破解translateZ

设置

问题

演示

1 个答案: