web-dev-qa-db-fra.com

Pourquoi la visibilité de la face arrière masquée ne fonctionne-t-elle pas dans IE10 lorsque la perspective est appliquée aux éléments parents?

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

Lorsque vous survolez le carré rouge, il pivote de 180 ° sur l'axe des x. Même si la visibilité de la face arrière est définie sur masquée, la face arrière est affichée, au moins jusqu'à ce que vous atteigniez 180 °, puis elle disparaît. Supprimez la propriété perspective et vous verrez qu'elle fonctionne comme prévu. La face arrière n'est pas visible du tout, mais l'effet 3d est bien sûr perdu.

Il est possible de contourner ce problème en appliquant une perspective dans la propriété de transformation: http://jsfiddle.net/M2pyb Mais cela causera des problèmes lors de la transformation de transform-Origin-z, lorsque z est défini sur autre chose que 0. , le tout devient "redimensionné": http://jsfiddle.net/s4ndv donc, malheureusement, ce n’est pas une solution.

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

csscss3css-transformsinternet-explorer-10
51
ndm

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

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

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

(Voir également 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é connue non prise en charge. Consultez http://msdn.Microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property :

Pour l'instant, 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- est de propager manuellement vos propriétés 3D.

28
chowey

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

7
torbonaut

Je suggérerais d'arrêter de vous battre 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 gars pour développer 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 se replier sur l'implémentation manquante de transformations 3D dans IE et de commencer à jouer avec les possibilités Edge les plus avancées des autres navigateurs.

sinon IE rendra votre code trop confus et ne vous donnera toujours pas les mêmes possibilités - comme la rotation d’objets 3D à plusieurs côtés.

..just mes 2 cents.

1
Malibur

Une solution de contournement que j'imagine consiste à ajouter une transition pour l'opacité avec une temporisation égale à 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;
}
1
Dan Ovidiu Boncut

J'ai une belle solution illogique, j'ai essayé toutes les solutions ci-dessus et aucune n'a fonctionné. Cependant, une erreur a fait. Je règle la visibilité de la face arrière sur visible 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;   
}
<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>

1
Michael

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

  }
0
Jon