8

设置

我div在一个容器内有三个在各个方向使用 CSS3 翻译的 s，该容器div本身就在一个外部的 fullscreendiv中。最外面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 中查看生成的代码。

4

1 回答 1

1

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

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

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

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

于 2013-04-10T08:45:44.360 回答