webentwicklung-frage-antwort-db.com.de

Warum funktioniert die Sichtbarkeit der Rückansicht in IE10 nicht, wenn die Perspektive auf übergeordnete Elemente angewendet wird?

Ok, hier ist ein weiterer IE10-Fehler. Das Problem ist, dass durch das Anwenden der Perspektive auf übergeordnete Elemente die Einstellung für verborgene Sichtbarkeit der Sicht nach hinten aufgehoben wird. Bitte sehen Sie diese Geige: http://jsfiddle.net/2y4eA

Wenn Sie den Mauszeiger über das rote Quadrat bewegen, wird es um 180 ° auf der x-Achse gedreht, und obwohl die Sichtbarkeit der Sicht nach hinten auf Verdeckt gesetzt ist, wird die Rückseite mindestens bis zum Erreichen von 180 ° angezeigt. Dann verschwindet sie. Entfernen Sie die perspektivische Eigenschaft, und Sie werden sehen, dass sie wie erwartet funktioniert, die Rückseite ist überhaupt nicht sichtbar, aber natürlich geht der 3D-Effekt verloren.

Es ist möglich, dieses Problem durch Anwenden einer Perspektive in der transform -Eigenschaft zu umgehen: http://jsfiddle.net/M2pyb Dies führt jedoch zu Problemen in Verbindung mit transform-Origin-z, wenn z auf einen anderen Wert als 0 gesetzt ist , das Ganze wird "skaliert": http://jsfiddle.net/s4ndv also das ist leider keine Lösung.

Die Sicht nach hinten ist wahrscheinlich ein Fehler? Wenn ja, gibt es eine andere Arbeit als die, die ich erwähnt habe?

51
ndm

Ich bin auch auf diese Störung gestoßen und es ist definitiv eine Störung.

Die Problemumgehung besteht darin, die perspektivische Transformation auf das untergeordnete Element anzuwenden. Ich habe Ihre Geige hier aktualisiert: http://jsfiddle.net/jMe2c/

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

(Siehe auch Antwort unter https://stackoverflow.com/a/14507332/2105930 )

Ich denke, es liegt daran, dass in IE 10 die 3D-Eigenschaften des übergeordneten Elements nicht an das untergeordnete Element weitergegeben werden. Dies ist eine bekannte nicht unterstützte Funktion. Check out http://msdn.Microsoft.com/de-de/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property :

Derzeit unterstützt Internet Explorer 10 das Schlüsselwort preserve-3d nicht. Sie können dies umgehen, indem Sie die Transformation des übergeordneten Elements zusätzlich zu der normalen Transformation des untergeordneten Elements manuell auf jedes der untergeordneten Elemente anwenden.

Daher ist die empfohlene Lösung Microsoft-, Ihre 3D-Eigenschaften selbst manuell zu verbreiten.

28
chowey

Ich kämpfte stundenlang. Dies ist die einzige Crossbrowser-Lösung, die für mich funktioniert: http://www.cssplay.co.uk/menu/css3-3d-card.html

7
torbonaut

Ich würde vorschlagen, aufhören zu kämpfen IE mit der perspektivischen Eigenschaft, die für alle transformierten Elemente festgelegt ist, und mit dem Testen der Unterstützung für preserve-3d beginnen. Ich folgte diesem Mann, um Modernizr mit einem Eigenschaftstest zu erweitern: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21 +

auf diese Weise ist es möglich, einen Fallback für die fehlenden Implementierungen von 3D-Transformationen durch IE auszuführen und mit den fortschrittlicheren Möglichkeiten der anderen Browser zu spielen.

andernfalls macht IE Ihren Code zu unordentlich und bietet Ihnen trotzdem nicht die gleichen Möglichkeiten - wie das Drehen von mehrseitigen 3D-Objekten.

..just meine 2 Cent.

1
Malibur

Eine Problemumgehung, die ich mir vorstellen kann, ist das Hinzufügen eines Übergangs für die Opazität, der kein Timing hat und eine Verzögerung um die Hälfte Ihres perspektivischen Übergangs besteht.

.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

Ich habe eine schöne unlogische Lösung, ich habe alle oben genannten Lösungen ausprobiert und keine hat funktioniert. Es ist jedoch ein Fehler aufgetreten. Ich habe die Sicht nach hinten auf sichtbar gesetzt, wenn die Karte umgedreht wird. funktioniert sowohl in IE als auch in Chrome. 

Es funktioniert besser in Chrome, IE ist in Ordnung. 

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

Ich habe die von @torbonaut und @chowey vorgeschlagene Lösung in diesem jsfiddle implementiert.

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