css3 transformar rotate3d con la perspectiva no funciona en Android

Question

Tengo una aplicación web que utiliza la transformación 3D que funciona bien en el navegador 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 en perspectiva. ¿Hay alguna manera de hacerlo funcionar en PhoneGap o utiliza un motor de representación diferente que simplemente no puede hacer transformaciones 3D?

utilizo

-webkit-perspective: 300; 

en la matriz y

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

en la imagen giratoria.

Answer 1

Soy más nuevo en la escena PhoneGap, pero por lo que recuerdo en mi lectura es que Android se ahoga en las transiciones 3D, pero eso puede ser solo en jQM, que a menudo se usa en las implementaciones de PhoneGap. Veo que hablas más sobre css, pero me pregunto si el problema que estás enfrentando y con lo que los desarrolladores de jQM tuvieron problemas podría estar relacionado.

JqueryMobile Transitions on PhoneGap Android

Answer 2

Tal PhoneGap funciona sin el prefijo -webkit-.

Siempre debe considerar incluir la propiedad no prefijada para que su código sea a prueba de futuro.

Answer 3

La propiedad perspective toma un valor de longitud por lo que siempre debe tener unidades. Algunos navegadores pueden inferir píxeles como la unidad si no se proporciona una unidad, pero siempre 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 no prefijada de la propiedad también. Esto debería venir después de la versión prefijada y, como dijo Tim Nguyen, será a prueba de futuro su aplicación ya que los navegadores dejan de requerir el prefijo.

Como un aparte, el transform-style: preserve-3d; se debe dar a los elementos cuyos hijos se están transformando en el espacio 3D por lo que no está realmente haciendo nada aquí.