8

設定

外側のフルスクリーン内にdivあるコンテナ内で、CSS3変換を全方向に使用する3つのがあります。最も外側のフルスクリーンのものが設定されています。divdivdivperspective

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変換された要素を含むは、他の方向には影響を与えずに、Z方向の変換を無効または無視するように設定overflow: hidden;されています。

デモ

コードと効果を示すために切り替わるボタンについては、このペンhttp://codepen.io/aaron/pen/Ihrxjを参照してください。overflow: hidden;

HAML、SCSS / Compass、またはCoffeeScriptに慣れていない場合は、HTML、CSS、およびJSの横にあるプリプロセッサの名前をクリックして、コードペンで生成されたコードを確認できます。

4

1 に答える 1

1

なぜこれが起こっているのかわかりませんが、いくつかの回避策を提案することができます。

明らかな解決策は、overflow: hidden;（本当に必要な場合は）アイテムをコンテナに適用する代わりに（.itemまたはで）設定することです。.container > *

別のオプションは、アイテムを絶対に配置することです。あまり便利ではありませんが、レイアウトに適している場合があります（アイテムをコンテナに対して絶対的に相対的に配置できます）。

どちらの場合もtransform3d、無効化/無視されることはありません。

于 2013-04-10T08:45:44.360 に答える