-webkit-transform在Android webview中无法正常工作

Question

我已经将以下的CSS应用到span标签中的图像上。

我已经将以下的CSS应用到span标签中的图像上。

-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform:rotate(-2deg);
-o-transform: rotate(-2deg);

这个CSS样式在iOS的Webview和桌面浏览器上可以正常显示，但在基于WebKit的Android Webview上无法正常渲染。

我的问题是为什么在Android上无法正常显示。

- user1118019

---

我知道这是4年前的事了，但你解决了这个问题吗？试图转换一张图片（甚至不是旋转），在Android webview上无法工作，但在其他地方都可以，包括模拟器中的webview。 - Dan Leveille

Answer 1

据我所知，旋转变换只适用于块级元素。而span默认是内联元素。

- Andrew

---

这是一个相当古老的问题，已经有一个被接受的答案。如果您能引用相关文档来支持您的论点，那将是很好的。 - Kev

Answer 2

我正在使用Android 3.1版本，这段代码对我来说很好用。我的代码如下：

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

width:200px;
height:200px;
background-color:#339933;
}
<div class="transofmr">Transform</div>

- cgvector

Answer 3

这会对你有所帮助.. 我已经在Motorlla XOOM设备上检查过了。

.transofmr
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

- cgvector

---

感谢cgvector。我不确定这是否与手机硬件有关。我尝试了Galaxy S2和Motorola Droid，都无法旋转。但是我在模拟器中尝试过，一切都按预期工作。你觉得这是否与Android手机的版本有关？还是你浏览器的渲染引擎有关？如果有，请告诉我你的Xoom版本号，这样我也可以检查一下我的设备。 - user1118019