为什么背面能见度的时隐时现的角度被应用到父元素在IE10不工作？(Why is backface-v

2019-06-18 08:06发布

站内文章 / 前端开发
73 0 0

好了，所以这里的另一个IE10毛刺。 问题是，在父元素应用角度打破了背面能见度隐藏设置。 请参阅此琴： http://jsfiddle.net/2y4eA

当将光标悬停在红色正方形它在x轴旋转180°，并且即使在背面-可见性设置为隐藏的，在背面被示出，至少直到达到180°，然后消失。 取出角度属性，你会看到它的工作原理与预期一致，背面是完全不可见，但ofcourse 3D效果将丢失。

这可以通过在变换属性应用的角度来解决这个问题： http://jsfiddle.net/M2pyb但是，这将导致与变换起源-Z，当Z被设置为0以外的任何东西，在整个事件中cojunction问题变成“缩放”： http://jsfiddle.net/s4ndv所以很遗憾，这不是一个解决方案。

在背面，啄公开程度是probaly的错误吗？ 如果是这样，是否有任何workaound比我提到的其他？

Answer 1:

我碰到了这个故障也和它肯定是一个小故障。

解决方法是应用子元素的透视变换。 我在这里更新您的提琴： 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/2105930 ）

我想，这是因为在IE 10，父元素的3D性能不传播到子元素。 这是一个已知的不支持的功能。 退房http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property ：

这时，Internet Explorer的10不支持保留-3D关键字。 您可以通过手动将父元素的变换到每个子元素除了子元素的正常变换解决这个问题。

因此， 微软 -recommended解决方法是自行手动传播您的3D性能。



Answer 2:

我挣扎了几个小时。 这是为我工作的唯一的跨浏览器的解决方案： http://www.cssplay.co.uk/menu/css3-3d-card.html



Answer 3:

我会想象一种解决方法是增加对具有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;
}


Answer 4:

我建议停止对所有已变换元素的角度属性集对抗IE，并开始为保护-3D支持的测试。 我跟着这家伙用性能测试扩大的Modernizr： https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+

这样一来，它可以做到回退IE浏览器的3D变换缺乏实施，并开始与其他浏览器更前沿的可能性播放。

否则IE会令你的代码太乱了，但仍不能给你同样的机会 - 像旋转的多边的3D对象。

..just我的2美分。



Answer 5:

我有一个很好的解决方案不合理，我尝试了上述所有的解决方案，并没有奏效。 然而，错误一样。 我的背面能见度设置为可见当卡被翻转。 工作在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>



Answer 6:

我实现了这个由@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);

  }


文章来源: Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
标签： css css3 css-transforms internet-explorer-10
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~