Css3 transform rotate3d with a perspective not working on Android

Question

I have a web application that uses 3D conversion that works fine in an Android browser on Android 4.1. However, the same application in the PhoneGap container leads to compression and expansion of the animation, and not to 3D rotation in the future. Is there a way to make it work in PhoneGap or use a different rendering engine that just can't do 3D conversions?

I use

-webkit-perspective: 300; 

for parent and

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

on a rotating image.

Answer 1

Perhaps the telephone connection works without the -webkit- prefix.

You should always think about including the unsrefixed property for your code in the future.

Answer 2

The perspective property takes a length value, so it should always have units. Some browsers may indicate pixels as a unit if a unit is not specified, but you should always specify. Also note that larger perspective values ​​result in a less dramatic perspective effect.

Also, be sure to add properties to the unprefixed version. This should happen after the prefix version and, as Tim Nguyen said, will check your application in the future, as browsers stop requiring the prefix.

Aside, transform-style: preserve-3d; it is necessary to point out the elements whose children are transformed in three-dimensional space, therefore nothing is done here.

Answer 3

I'm new to the PhoneGap scene, but from what I remember reading, Android is choking on 3D transitions, but it can only be in jQM, which is often used in PhoneGap implementations. I see that you are talking more about css, but I am wondering if the problems you are facing may be and what the jQM developers might face.

JqueryMobile Transitions on Android Phone Phone