Css3 transformar rotate3d con la perspectiva no funciona en Android

Tengo una aplicación web que utiliza la transformación en 3D que funciona bien en el navegador de Android en Android 4.1. Sin embargo, la misma aplicación en un contenedor PhoneGap da como resultado una animación de compresión y expansión y no una rotación 3D de perspectiva. ¿Hay una manera de hacerla funcionar en PhoneGap o él utiliza un diverso motor de la representación que apenas no puede hacer transformaciones 3D?

yo suelo

-webkit-perspective: 300; 

En los padres y

 -webkit-transform: rotate3d(0, 1, 0, -180deg); -webkit-transform-style: preserve-3d; 

En la imagen giratoria.

Tal vez phonegap funciona sin el prefijo -webkit- .

Siempre debe pensar en incluir la propiedad sin prefijar para que su código sea una prueba futura.

La propiedad de la perspective toma un valor de la longitud así que debe siempre tener unidades. Algunos navegadores pueden inferir píxeles como la unidad si no se da una unidad, pero siempre se debe especificar. También tenga en cuenta que los valores más grandes de perspectiva dan como resultado un efecto de perspectiva menos dramático.

También asegúrese de agregar en la versión sin prefijar de la propiedad en también. Esto debe venir después de la versión prefijada y, como dijo Tim Nguyen, la prueba del futuro de su aplicación como los navegadores dejar de requerir el prefijo.

Como un aparte, el transform-style: preserve-3d; Debe darse a los elementos cuyos hijos están siendo transformados en el espacio 3d por lo que no es realmente hacer nada aquí.

Soy más reciente en la escena de PhoneGap, pero de lo que recuerdo en mi lectura es que Android sofoca en las transiciones 3D, pero que sólo puede ser en jQM, que se utiliza a menudo en las implementaciones PhoneGap. Veo que estás hablando más sobre css, pero me pregunto si el problema que estás encontrando, y lo que los desarrolladores de jQM tuvieron problemas con podrían estar vinculados.

Transiciones de JqueryMobile en PhoneGap Android

  • PhoneGap - Teclado hace que la pantalla se vuelva negra y flickery durante algún tiempo en Samsung Galaxy Tab 10.1
  • ¿Qué hace -webkit-text-size-adjust?
  • Desarrollo de HTML5 para Android
  • ¿El diseño sensible no funciona en Android?
  • Forzar la interpretación de porcentaje de transformación CSS3 correcta en Android
  • Background-size: cubierta que no funciona en el navegador nativo de Android
  • CSS3 animación parpadeo en Android 2.2 (webkit-transform: translate (..) escala (..) al mismo tiempo)
  • Evento de clic de JQuery de un elemento div en li no disparado en Safari móvil
  • El navegador de Android ignora el diseño web sensible
  • Html 5 rango deslizante para dispositivos táctiles? Alternativas a jquery móvil?
  • ¿La vista Web de Android admite CSS3 WebKit Animations?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.