css3 transform rotate3d with perspective not working on Android

Question

I have a Web App that uses 3D transformation which runs fine in the Android browser on Android 4.1. However, the same app in a PhoneGap container results in a squeeze and expand animation and not a perspective 3D rotation. Is there a way to make it run in PhoneGap or does it use a different rendering engine which just cannot do 3D transformations?

I use

-webkit-perspective: 300;

on the parent and

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

on the rotating image.

Answer 1

Maybe phonegap works without the -webkit- prefix.

You should always think of including the unprefixed property for your code to be future proof.

Answer 2

The perspective property takes a length value so it should always have units. Some browsers may infer pixels as the unit if a unit isn't given but you should always specify. Also note that larger values of perspective result in a less dramatic perspective effect.

Also make sure to add in the unprefixed version of the property in as well. This should come after the prefixed version and, as Tim Nguyen said, will future-proof your app as browsers stop requiring the prefix.

As an aside, the transform-style: preserve-3d; should be given to elements whose children are being transformed in 3d space so it's not really doing anything here.