CSS rotation not applied in Android 4.0 webview

问题

I am building an Android app with Phonegap. My screen's corners are darkened by an overlaying PNG image, Markup looks like:

<div id="tl" class="corner"></div>
<div id="tr" class="corner"></div>
<div id="bl" class="corner"></div>
<div id="br" class="corner"></div>

and CSS:

.corner{
background: url('img/corner.png');
position: fixed;
z-index: 5;
width: 120px;
height: 120px;
}
#tl{
top: 0;
left: 0;
}
#tr{
top:0;
right: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#br{
right: 0;
bottom: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#bl{
bottom: 0;
left: 0;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}

This works perfectly fine in all desktop webkit browsers, my phone (which is running Android 2.3.5), all Android 2.x AVDs, yet when I launch a 4.0 AVD the rotation of the image is lost (the positioning works the way it should). Is this a bug in the AVD, a bug in Android 4 or am I missing something here? Any input is appreciated, thanks!

This is what it should look like (running in a 2.2 AVD):

This is what's happening in 4.0:

Meh!

回答1:

Try using all types of rotation just to be sure.

transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */

来源：https://stackoverflow.com/questions/9359543/css-rotation-not-applied-in-android-4-0-webview