web-dev-qa-db-ja.com

パースペクティブが親要素に適用されているときに、IE10でbackface-visibility hiddenが機能しないのはなぜですか？

OK、だからここに別のIE10グリッチがあります。問題は、親要素にパースペクティブを適用すると、backface-visibility hidden設定が壊れることです。このフィドルをご覧ください： http://jsfiddle.net/2y4eA

赤い四角の上にカーソルを合わせると、x軸で180°回転し、背面の表示が非表示に設定されていても、少なくとも180°に達するまで背面が表示されなくなります。パースペクティブプロパティを削除すると、期待どおりに機能し、背面はまったく表示されませんが、3D効果は失われます。

Transformプロパティにパースペクティブを適用することにより、この問題を回避することができます。 http://jsfiddle.net/M2pyb しかし、zが何かに設定されている場合、transform-Origin-zとの連携で問題が発生します0以外は、全体が「スケーリング」されます。 http://jsfiddle.net/s4ndv 残念ながら、これは解決策ではありません。

バックフェイスの可視性はおそらくバグですか？もしそうなら、私が言及したもの以外の回避策はありますか？

csscss3css-transformsinternet-explorer-10
51
ndm

私もこのグリッチに出くわしましたが、これは間違いなくグリッチです。

回避策は、子要素に透視変換を適用することです。ここでフィドルを更新しました： http://jsfiddle.net/jMe2c/

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

（ https://stackoverflow.com/a/14507332/21059 の回答も参照してください）

これは、IE 10、親要素3d-propertiesが子要素に伝播しないためです。これは、サポートされていない既知の機能です。チェックアウト http：// msdn。 Microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property ：

現時点では、Internet Explorer 10はpreserve-3dキーワードをサポートしていません。これを回避するには、子要素の通常の変換に加えて、親要素の変換を各子要素に手動で適用します。

Microsoft-推奨ソリューションは、3dプロパティを自分で手動で伝達することです。

28
chowey

私は何時間も苦労しました。これは私のために働いた唯一のクロスブラウザソリューションです： http://www.cssplay.co.uk/menu/css3-3d-card.html

7
torbonaut

戦闘を停止することをお勧めしますIEすべての変換された要素にパースペクティブプロパティを設定し、preserve-3dのサポートのテストを開始します。プロパティテストでModernizrを拡張するためにこの男に続きました： https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+

そうすれば、IEの3D変換の実装が不足している場合にフォールバックを実行し、他のブラウザーでより最先端の可能性で遊ぶことができます。

それ以外の場合IEはコードを乱雑にしますが、多面的な3Dオブジェクトを回転させるなど、同じ可能性を与えません。

..ちょうど2セント。

1
Malibur

私が想像する回避策は、0のタイミングを持ち、パースペクティブトランジションの半分の遅延を持つ不透明度のトランジションを追加することです。

.container, .item {
    width: 200px;
    height: 200px;
    opacity:1;
}
.container {
    perspective: 200px;
}
.container:hover .item {
    transform: rotateX(180deg);
    opacity:0;
}
.item {
    background-color: #ff0000;
    backface-visibility: hidden;
    transition: transform 3000ms, opacity 0ms 1500ms;
}
1
Dan Ovidiu Boncut

私は素敵な非論理的な解決策を持っています。上記のすべての解決策を試しましたが、どれもうまくいきませんでした。ただし、エラーが発生しました。カードを裏返したときにbackface-visibilityをvisibleに設定しました。 IEとChromeの両方で動作します。

Chromeでうまく動作します。IEで問題ありません。

var flipcard = document.getElementsByClassName("flipcard");
var i;

for (i = 0; i < flipcard.length; i++) {
    flipcard[i].addEventListener("click", function() {
        this.classList.toggle("is-flipped");
    });
}
.card_scene {
    width: 180px;
    height: 234px;
    margin: 10px 5px;
    perspective: 600px;
    float:left;
  }

  .flipcard {
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative; 
  }

  .flipcard.is-flipped {
    transform: rotateY(180deg);
  }

  .flipcard.is-flipped .card__face {
    backface-visibility: visible;                        
}

 .card__face {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    line-height: 234px;
    backface-visibility: hidden;
  }
  
 

.card__face--front {
        transform: rotateY(0deg);
}

.card__face--back {
        background: white;
        transform: rotateY(-180deg);
        border: 1px solid #CCC; 
        width: 100%;
}

.cardtext {
        margin: 6px;
    font-size:14px;
    line-height: 1.2em;
    display: inline-block;
    width: 100%;
    white-space: pre;
}

.flipcard-breakfloat {
 clear: left;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start of flipcard tempalte -->
<div class="build-only">
<h2>question text here</h2>
<p>Flip the pictures to...</p>
<div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"><img width="180" height="234" id="yui_3_17_2_1_1534724749880_198" src="https://media.gettyimages.com/photos/world-heritage-listed-rainforest-in-dorrigo-national-park-new-south-picture-id936315116" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback **<br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below  <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/lonely-single-tree-in-the-field-picture-id680917092" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below  <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/old-tree-picture-id173501312" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below  <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
</div>
<div class="flipcard-breakfloat"></div>
</div>
<!-- end of flipcard tempalte -->
<p></p>
<p></p>
1
Michael

これで@torbonautと@choweyによって提案されたソリューションを実装しました jsfiddle

html

<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>

css

  #container, .bottom, .top {
    width: 200px;
    height: 300px;
    position: absolute;
    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
  }

  .backhide{

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #container:hover .bottom {
    -moz-transform: perspective(800px) rotateY(0);
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
  }
  #container:hover .top {
    -webkit-transform: perspective(800px) rotateY(-180deg);
    -moz-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }

  .bottom {
    background-color: #ff0000;
    -moz-transform: perspective(800px) rotateY(180deg);
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }

  .top {
    background-color: #e0e0e0;


    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);

  }
0
Jon