Pourquoi la visibilité arrière cachée ne fonctionne pas dans IE10 lorsque la perspective est appliquée aux éléments parents ?

Question

Ok, voici un autre problème avec IE10. Le problème est que l'application de la perspective sur les éléments parents brise le paramètre de visibilité arrière cachée. Veuillez voir cette astuce : http://jsfiddle.net/2y4eA

Lorsque vous survolez le carré rouge, il tourne de 180° sur l'axe des x, et même si la visibilité de la face arrière est réglée sur cachée, la face arrière est affichée, du moins jusqu'à ce que le 180° soit atteint, puis elle disparaît. Enlevez la propriété de perspective, et vous verrez que cela fonctionne comme prévu, la face arrière n'est pas visible du tout, mais bien sûr l'effet 3D est perdu.

Il est possible de contourner ce problème en appliquant une perspective dans la propriété transform : http://jsfiddle.net/M2pyb Mais cela pose des problèmes en conjonction avec transform-origin-z, lorsque z est défini à une valeur autre que 0, l'ensemble est "mis à l'échelle" : http://jsfiddle.net/s4ndv donc malheureusement ce n'est pas une solution.

Le truc de la visibilité arrière est probablement un bug ? Si oui, y a-t-il une solution autre que celle que j'ai mentionnée ?

Answer 1

J'ai rencontré ce problème aussi et c'est définitivement un problème.

La solution de contournement consiste à appliquer la transformation de perspective sur l'élément enfant. J'ai mis à jour votre bidule ici : http://jsfiddle.net/jMe2c/

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

(Voir aussi la réponse à https://stackoverflow.com/a/14507332/2105930 )

Je pense que c'est parce que dans IE 10, les propriétés 3d de l'élément parent ne se propagent pas à l'élément enfant. Il s'agit d'une fonctionnalité connue et non prise en charge. Consultez le site http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property :

À l'heure actuelle, Internet Explorer 10 ne prend pas en charge l'option d'accès à l'Internet. préserver-3d mot-clé. Vous pouvez contourner ce problème en appliquant manuellement la transformation de l'élément parent à chacun des éléments enfants en plus de la transformation normale de l'élément enfant.

Ainsi, le Microsoft La solution recommandée est de propager vous-même vos propriétés 3d, manuellement.

Answer 2

J'ai lutté pendant des heures. C'est la seule solution crossbrowser qui a fonctionné pour moi : http://www.cssplay.co.uk/menu/css3-3d-card.html

Answer 3

J'ai une belle solution illogique, j'ai essayé toutes les solutions ci-dessus et aucune n'a fonctionné. Cependant, une erreur est survenue. J'ai défini la visibilité de la face arrière sur visible lorsque la carte est retournée. Cela fonctionne à la fois dans IE et Chrome.

Il fonctionne mieux dans Chrome, IE est ok.

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 4

Une solution de contournement que j'imagine est d'ajouter une transition pour l'opacité qui a un timing de 0 et un retard de la moitié de votre transition de perspective.

.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 5

Je vous suggère d'arrêter de vous battre contre IE avec la propriété de perspective définie sur tous les éléments transformés et de commencer à tester le support de preserve-3d. J'ai suivi ce type pour étendre Modernizr avec un test de propriété : https://coderwall.com/p/qctclg?comment=This+était+superbe%21+et+exactement+ce+dont+j'avais+besoin.+Merci%21+.

De cette façon, il est possible de faire une solution de repli pour l'implémentation déficiente des transformations 3D dans IE, et de commencer à jouer avec les possibilités les plus avancées des autres navigateurs.

Sinon, IE rendra votre code trop compliqué et ne vous offrira pas les mêmes possibilités, comme la rotation d'objets 3D à plusieurs faces.

juste mes deux centimes.