¿Por qué la visibilidad de la cara posterior oculta no funciona en IE10 cuando se aplica perspectiva a los elementos principales?

Bien, aquí hay otro error IE10. El problema es que la aplicación de perspectiva en los elementos principales rompe la configuración oculta de visibilidad de la cara posterior. Por favor, mira este violín: http://jsfiddle.net/2y4eA

Cuando pasas el cursor sobre el cuadrado rojo, gira 180 ° en el eje x, y aunque la visibilidad de la cara posterior está configurada como oculta, se muestra la cara posterior, al menos hasta que se alcanzan los 180 °, y luego desaparece. Elimine la propiedad de la perspectiva y verá que funciona como se esperaba, la cara posterior no es visible en absoluto, pero por supuesto se pierde el efecto 3d.

Es posible resolver este problema aplicando perspectiva en la propiedad de transformación: http://jsfiddle.net/M2pyb Pero esto causará problemas en la combinación con transform-origin-z, cuando z se establece en cualquier cosa que no sea 0, todo se convierte en “escalado”: http://jsfiddle.net/s4ndv, así que desafortunadamente esa no es una solución.

¿La cara de la cara posterior es probablemente un error? Si es así, ¿hay algún otro trabajo aparte del que he mencionado?

Me encontré con este error también y definitivamente es un error.

La solución consiste en aplicar la transformación de perspectiva en el elemento secundario. Actualicé tu violín aquí: http://jsfiddle.net/jMe2c/

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

(Consulte también la respuesta en https://stackoverflow.com/a/14507332/2105930 )

Creo que es porque en IE 10, las propiedades 3d del elemento padre no se propagan al elemento secundario. Esta es una característica conocida no compatible. Consulte http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property :

En este momento, Internet Explorer 10 no admite la palabra clave preserve-3d . Puede solucionar esto aplicando manualmente la transformación del elemento principal a cada uno de los elementos secundarios además de la transformación normal del elemento secundario.

Entonces, la solución recomendada por Microsoft es la de propagar sus propiedades 3D usted mismo, de forma manual.

Luché por horas. esta es la única solución de navegador cruzado que funcionó para mí: http://www.cssplay.co.uk/menu/css3-3d-card.html

Una solución alternativa que me gustaría imaginar es agregar una transición para la opacidad que tiene un tiempo 0 y tiene un retraso de la mitad de la transición de perspectiva.

 .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; } 

Sugiero dejar de luchar contra IE con la propiedad de perspectiva establecida en todos los elementos transformados y comenzar a probar para obtener soporte para preserve-3d. Seguí a este tipo para expandir Modernizr con una prueba de propiedades: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+Y+exlyly+what+i+needed.+Thanks%21+

de esta forma, es posible hacer un repliegue para la implementación falta de IE de las transformaciones 3D, y comenzar a jugar con las posibilidades más avanzadas en los otros navegadores.

de lo contrario, IE hará que su código sea demasiado desordenado, y aún así no le dará las mismas posibilidades, como rotar objetos 3D multidireccionales.

..justo mis 2 centavos.

Implementé la solución propuesta por @torbonaut y @chowey en este jsfiddle

html

 
bottom
top

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); } 

Tengo una buena solución ilógica, probé todas las soluciones anteriores y ninguna funcionó. Sin embargo, un error sí. Configuré la visibilidad de la cara posterior visible cuando la tarjeta se voltea. funciona tanto en IE como en Chrome.

Funciona mejor en Chrome, IE está bien.

 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; } 
   

question text here

Flip the pictures to...

** max width of feedback **
Add feedback text here use
shift+enter for line breaks.
don't use just use enter or
break will appear below
iamge, and overlay the text.
note the class
".nsw-td-flipcard-breakfloat"
this breaks the float: left so
following text appears
as normal
Image size is width:
"180" height: "234"

** max width of feedback **
Add feedback text here use
shift+enter for line breaks.
don't use just use enter or
break will appear below
iamge, and overlay the text.
note the class
".nsw-td-flipcard-breakfloat"
this breaks the float: left so
following text appears
as normal
Image size is width:
"180" height: "234"

** max width of feedback **
Add feedback text here use
shift+enter for line breaks.
don't use just use enter or
break will appear below
iamge, and overlay the text.
note the class
".nsw-td-flipcard-breakfloat"
this breaks the float: left so
following text appears
as normal
Image size is width:
"180" height: "234"