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 implémenté la solution proposée par @torbonaut et @chowey dans ceci 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);

  }