CSS3旋转替代方案？

Question

我使用CSS3规则“旋转”来旋转包含文本的div。你可以在这里看到这个页面：http://vitaminjdesign.com/v2/socialmedia.html。我正在寻找对旋转div的跨浏览器支持；然而，这个CSS3规则在IE上不起作用。是否有jQuery选项或其他JavaScript解决方案可以产生相同的结果，并且具有跨浏览器兼容性？

Answer 1

通过使用Sandpaper，您可以使用以下CSS规则：

-sand-transform: rotate(90deg);

而且它可以在所有浏览器中运行--甚至在IE中也是如此。

Answer 2

如果你想要css旋转与IE的旧版本兼容，有一个filter progid:DXImageTransform.Microsoft.Matrix，但它只能应用一次，当你计算出最终的矩阵时，会涉及很多计算。

Answer 3

我会用拉斐尔和卡丰来做这类事情，尽管在旋转时你必须自己滚动换行，因为你必须使用拉斐尔的print而不是卡丰的replace。这样，字体就是向量，旋转是以纯几何的方式处理的。

css-rotate目前的问题超出了跨浏览器的兼容性--在支持它的浏览器中，结果通常看起来很糟糕。你的网站在我的火狐3.6中看起来就像是参差不齐的基线上的混搭。我知道你问了一个具体的问题，我尽了最大的努力去回答，但我给你的建议是，为了你在这里试图实现的目标，抛开js库的开销，只需要一个高质量的图像。您已经在“挂起的标签”背景图像上投入了带宽，因此向该图像添加文本的成本很低，而为您正确处理文本旋转问题的整个新js库的成本将相当高。不是最先进的解决方案，我向你保证...但这就是我们今天所处的位置。