Dlaczego ukryta widoczność wsteczna nie działa w IE10, gdy perspektywa jest stosowana do elementów nadrzędnych?
Ok, oto kolejna usterka IE10. Problem polega na tym, że zastosowanie perspektywy na elementach nadrzędnych łamie Ukryte ustawienie widoczności wstecznej. Zobacz też: http://jsfiddle.net/2y4eA
Po najechaniu na czerwony kwadrat obraca się o 180° na osi x i nawet jeśli widoczność tylnej powierzchni jest ustawiona na ukrytą, tylna powierzchnia jest wyświetlana, przynajmniej do osiągnięcia 180°, a następnie znika. Usuń właściwość perspective, a zobaczysz, że działa jako oczekuje się, że backface nie jest w ogóle widoczny, ale oczywiście efekt 3d jest stracony.
Możliwe jest obejście tego problemu poprzez zastosowanie perspective we właściwości transform: http://jsfiddle.net/M2pyb ale spowoduje to problemy w współfunkcji z transform-origin-z, gdy z jest ustawione na coś innego niż 0, całość staje się "skalowana": http://jsfiddle.net/s4ndv więc niestety to nie jest rozwiązanie.
The backface-visibilty thingy to Probably A bug? Jeśli tak, to czy istnieje jakieś obejście inne niż to, o którym wspomniałem?
6 answers
Ja też natknąłem się na tę usterkę i zdecydowanie jest to usterka.
Obejście polega na zastosowaniu transformacji perspektywy na elemencie potomnym. Zaktualizowałem Twoje skrzypce tutaj: http://jsfiddle.net/jMe2c/
.item {
backface-visibility: hidden;
transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
transform: perspective(200px) rotateX(180deg);
}
(Zobacz też odpowiedź na https://stackoverflow.com/a/14507332/2105930 )
Myślę, że jest tak dlatego, że w IE 10 właściwości elementu nadrzędnego 3D nie propagują się do elementu podrzędnego. Jest to znana nieobsługiwana funkcja. Zobacz też http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:
W tej chwili Internet Explorer 10 nie obsługuje słowa kluczowego preserve-3D. Można to obejść, ręcznie stosując transformację elementu nadrzędnego do każdego z elementów potomnych, oprócz normalnej transformacji elementu potomnego.
Więc Microsoft -zalecanym rozwiązaniem jest samodzielne rozpropagowanie właściwości 3d, ręcznie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:31
Walczyłem godzinami. to jedyne rozwiązanie crossbrowsera, które mi się udało: http://www.cssplay.co.uk/menu/css3-3d-card.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-06 19:15:39
Obejściem, które wyobrażam sobie, jest dodanie przejścia dla nieprzezroczystości, która ma 0 czasu i ma opóźnienie o połowę Twojego przejścia perspektywy.
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-07 14:08:37
Proponuję przestać walczyć z IE z właściwościami perspective ustawionymi na wszystkich elementach i zacząć testować wsparcie dla preserve-3d. Podążyłem za tym gościem, aby rozszerzyć Modernizr o test właściwości: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+
W ten sposób można zrobić awaryjne dla IE brak implementacji transformacji 3D, i zacząć grać z bardziej nowatorskich możliwości w innych przeglądarki.
W Przeciwnym Razie IE sprawi, że Twój kod będzie zbyt brudny, a nadal nie da ci tych samych możliwości - jak obracanie wielowymiarowych obiektów 3d.
..tylko moje 2 centy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-25 10:08:26
Zaimplementowałem rozwiązanie zaproponowane przez @ torbonaut i @chowey w tym 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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-28 21:16:05
Mam ładne nielogiczne rozwiązanie, próbowałem wszystkich powyższych rozwiązań i żadne nie działało. Jednak wystąpił błąd. Ustawiłem backface-visibility na visible po odwróceniu karty. działa zarówno w IE jak i Chrome.
Działa lepiej w Chrome, IE jest 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-23 01:52:17