52

好的，这是另一个 IE10 故障。问题是对父元素应用透视会破坏背面可见性隐藏设置。请看这个小提琴：http: //jsfiddle.net/2y4eA

当您将鼠标悬停在红色方块上时，它会在 x 轴上旋转 180°，即使将背面可见性设置为隐藏，也会显示背面，至少在达到 180° 之前，它会消失。去掉perspective 属性，你会看到它按预期工作，背面根本不可见，但当然失去了3d 效果。

可以通过在变换属性中应用透视来解决这个问题：http: //jsfiddle.net/M2pyb但这会导致与变换原点-z结合的问题，当z设置为0以外的任何东西时，整个事情变得“缩放”： http: //jsfiddle.net/s4ndv所以不幸的是这不是一个解决方案。

背面可见性的东西可能是一个错误？如果是这样，除了我提到的之外，还有其他解决方法吗？

4

6 回答 6

29

我也遇到了这个故障，这绝对是一个故障。

解决方法是对子元素应用透视变换。我在这里更新了你的小提琴：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 不支持preserve-3d关键字。除了子元素的正常变换之外，您可以通过手动将父元素的变换应用于每个子元素来解决此问题。

因此，Microsoft推荐的解决方案是手动传播您的 3d 属性。

于 2013-03-04T07:20:20.370 回答
7

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

于 2013-04-06T19:15:39.593 回答
1

我想的一种解决方法是为不透明度添加一个过渡，它的时间为 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;
}
于 2013-03-07T14:08:37.787 回答
1

我建议停止使用在所有转换元素上设置的透视属性与 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美分。

于 2014-06-25T10:08:26.877 回答
1

我有一个很好的不合逻辑的解决方案，我尝试了上述所有解决方案，但都没有奏效。但是，发生了错误。我将卡片翻转时的背面可见性设置为可见。适用于 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>

于 2018-08-23T01:52:17.033 回答
0

我在这个jsfiddle中实现了 @torbonaut 和 @chowey 提出的解决方案

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);

  }
于 2016-09-28T21:16:05.960 回答