Pourquoi la visibilité arrière n’est-elle pas masquée dans IE10 lorsque la perspective est appliquée aux éléments parents?

Ok, alors voici un autre problème d’Internet Explorer 10. Le problème est que l’application de la perspective sur les éléments parents brise le paramètre caché de visibilité arrière. S’il vous plaît voir ce violon: http://jsfiddle.net/2y4eA

Lorsque vous passez le curseur sur le carré rouge, il pivote de 180 ° sur l’axe des x et, même si la visibilité arrière est masquée, la face arrière est affichée, au moins jusqu’à ce que le 180 ° soit atteint. Supprimez la propriété 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 entraînera des problèmes de cojonction avec transform-origin-z, lorsque z est défini sur une valeur autre que 0, le tout devient “redimensionné”: http://jsfiddle.net/s4ndv donc, malheureusement, ce n’est pas une solution.

Le truc de la face arrière est-il un bogue? Si oui, existe-t-il des solutions autres que celle que j’ai mentionnée?

Je me suis aussi heurté à ce problème et c’est vraiment un problème.

La solution consiste à appliquer la transformation de perspective sur l’élément enfant. J’ai mis à jour ton violon 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. Ceci est une fonctionnalité non prise en charge connue. Découvrez 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 le mot clé preserve-3d . 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.

La solution recommandée par Microsoft consiste donc à propager manuellement vos propriétés 3D, manuellement.

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

Une solution de contournement que j’imagine est en ajoutant une transition pour l’opacité qui a 0 timing et a 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; }

Je suggère de ne plus affronter IE avec la propriété perspective sur tous les éléments transformés et de commencer à tester le support de preserve-3d. J’ai suivi ce gars pour étendre Modernizr avec un test de propriété: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+

de cette façon, il est possible de faire un retour en arrière pour l’implémentation de IE pour les transformations 3D, et commencer à jouer avec les possibilités les plus avancées des autres navigateurs.

Sinon, IE rendra votre code trop désordonné et ne vous donnera toujours pas les mêmes possibilités, comme la rotation d’objects 3D multi-faces.

..just mon 2 cents.

J’ai implémenté la solution proposée par @torbonaut et @chowey dans ce jsfiddle

html

  bottom
 top

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

J’ai une bonne solution illogique, j’ai essayé toutes les solutions ci-dessus et aucune n’a fonctionné. Cependant, une erreur s’est produite. Je règle la visibilité de la face arrière lorsque la carte est retournée. fonctionne à la fois dans IE et Chrome.

Cela 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; }

    question text here
 Flip the pictures to...
     
  ** max width of feedback **
Add feedback text here use 
shift+enter for line breaks. 
don't use just use enter or 
break will appear below 
iamge, and overlay the text. 
note the class 
".nsw-td-flipcard-breakfloat" 
this breaks the float: left so 
 following text appears 
as normal 
Image size is width: 
"180" height: "234"
 
 
 
     
  ** max width of feedback ** 
Add feedback text here use 
shift+enter for line breaks. 
don't use just use enter or 
break will appear below 
iamge, and overlay the text. 
note the class 
".nsw-td-flipcard-breakfloat" 
this breaks the float: left so 
 following text appears 
as normal 
Image size is width: 
"180" height: "234"
 
 
 
     
  ** max width of feedback ** 
Add feedback text here use 
shift+enter for line breaks. 
don't use just use enter or 
break will appear below 
iamge, and overlay the text. 
note the class 
".nsw-td-flipcard-breakfloat" 
this breaks the float: left so 
 following text appears 
as normal 
Image size is width: 
"180" height: "234"