app 中的webview控件与终端浏览器的内核不一致

这两天做了一个“砸金蛋”的效果

http://git.oschina.net/hbiao68/bomb_egg

 

从点击选择砸的蛋，到锤子砸蛋，到蛋碎裂，最后从蛋中显示代金券一系列动作自动完成。

 

问题：

在PC浏览器、android 和  iphone手机浏览器中显示全部正常，但是将其运行到app的webview控件中显示，却没有“锤子砸”的效果？

 

问题分析：

锤子砸的效果是使用的CSS3,transform:rotate(-5deg);

因为认为移动端的浏览器支持CSS3的效果已经很好了，所以就没有使用-webkit-transform

由于app中的webview还是与PC和手机浏览器中的内核有一定的差异（例如为了兼容更早期版本的浏览器，舍弃了一些高级更消耗资源的动画效果），导致对相同的代码，在浏览器中显示OK，却在webveiw中显示不正常

 

<div class="absolute width_33" style="top:-7%;right: 7%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg);" id="hammerContainer">