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

tipos de perspectiva conica

Question

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?

Answer 1

Implementé la solución propuesta por @torbonaut y @chowey en este 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);

  }

Answer 2

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

Answer 3

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://.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.

Answer 4

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+And+exactly+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.

Answer 5

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