почему скрытая задняя сторона не работает в ie10, когда перспектива применяется к родительским элементам?

<p>итак, вот еще один глюк ie10. проблема в том, что применение перспективы к родительским элементам нарушает скрытую настройку видимости задней стороны. пожалуйста, смотрите эту скрипку: <a href="http://jsfiddle.net/2y4ea">http://jsfiddle.net/2y4ea</a> </p><p>когда вы наводите курсор мыши на красный квадрат, он поворачивается на 180 ° по оси x, и хотя задняя сторона видимости скрыта, задняя сторона отображается, по крайней мере, до достижения 180 °, но затем исчезает. удалите перспективное свойство, и вы увидите, что оно работает, как и ожидалось, задняя поверхность вообще не видна, но, конечно, эффект 3d теряется.</p><p>эту проблему можно обойти, применив перспективу в свойстве transform: <a href="http://jsfiddle.net/m2pyb">http://jsfiddle.net/m2pyb</a> но это вызовет проблемы в сочетании с transform-origin-z, когда z имеет значение, отличное от 0 все становится "масштабированным": <a href="http://jsfiddle.net/s4ndv">http://jsfiddle.net/s4ndv</a> так что, к сожалению, это не решение проблемы.</p><p>задняя сторона-видимость вещь, вероятно, ошибка? если так, есть ли какой-нибудь обходной путь, кроме того, который я упомянул?</p>

<p>я тоже столкнулся с этим глюком, и это определенно глюк.</p><p>обходной путь должен применить перспективное преобразование к дочернему элементу. я обновил вашу скрипку здесь: <a href="http://jsfiddle.net/jme2c/">http://jsfiddle.net/jme2c/</a> </p><pre><code>.item { backface-visibility: hidden; transform: perspective(200px) rotatex(0deg); } .container:hover .item { transform: perspective(200px) rotatex(180deg); } </code></pre><p>(см. также ответ на <a href="https://stackoverflow.com/a/14507332/2105930">https://stackoverflow.com/a/14507332/2105930</a> )</p><p>я думаю, это потому, что в ie 10 3d-свойства родительского элемента не распространяются на дочерний элемент. это известная неподдерживаемая функция. проверьте <a href="http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the\_ms\_transform\_style\_property">http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the\_ms\_transform\_style\_property</a> :</p><blockquote> <p>в настоящее время internet explorer 10 не поддерживает ключевое слово <strong>preserve-3d</strong>. вы можете обойти это, вручную применяя преобразование родительского элемента к каждому дочернему элементу в дополнение к обычному преобразованию дочернего элемента.</p> </blockquote><p>таким образом, <em>microsoft</em>- рекомендуемое решение состоит в том, чтобы распространять ваши 3d-свойства самостоятельно, вручную.</p>

<p>я боролся часами. это единственное кросс-браузерное решение, которое сработало для меня: <a href="http://www.cssplay.co.uk/menu/css3-3d-card.html">http://www.cssplay.co.uk/menu/css3-3d-card.html</a> </p>

<p>я бы предложил прекратить борьбу ie со свойством перспективы, установленным на всех преобразованных элементах, и начать тестирование для поддержки preserve-3d. я последовал за этим парнем, чтобы расширить modernizr тестом свойств: <a href="https://coderwall.com/p/qctclg?comment=this+was+awesome%21+and+exactly+what+i+needed.+thanks%21+">https://coderwall.com/p/qctclg?comment=this+was+awesome%21+and+exactly+what+i+needed.+thanks%21 +</a> </p><p>таким образом, можно сделать запасной вариант из-за отсутствия в ie реализации 3d-преобразований и начать играть с более передовыми возможностями edge в других браузерах.</p><p>в противном случае ie сделает ваш код слишком запутанным и все равно не даст вам таких же возможностей, как вращающиеся многогранные трехмерные объекты.</p><p>... просто мои 2 цента.</p>

<p>обходной путь, который я хотел бы представить, - добавить переход к непрозрачности с нулевым временем и задержкой в половину вашего перспективного перехода.</p><pre><code>.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; } </code></pre>

<p>у меня есть хорошее нелогичное решение, я попробовал все решения выше, и ни одно не сработало. однако произошла ошибка. я установил видимость задней поверхности, чтобы она отображалась при переворачивании карты. работает как в ie, так и в chrome. </p><p>это лучше работает в chrome, ie в порядке. </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var flipcard = document.getelementsbyclassname("flipcard"); var i; for (i = 0; i < flipcard.length; i++) { flipcard[i].addeventlistener("click", function() { this.classlist.toggle("is-flipped"); }); }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>

<p>я реализовал решение, предложенное @torbonaut и @chowey в этом <a href="http://jsfiddle.net/jme2c/505/">jsfiddle</a> </p><p>html</p><pre><code><div id='container'> <div class='backhide bottom'>bottom</div> <div class='backhide top'>top</div> </div> </code></pre><p>css</p><pre><code> #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); } </code></pre>