CSS3旋转替代？

Posted 2023-05-08

【中文标题】CSS3旋转替代？

【英文标题】：CSS3 rotate alternative?

【发布时间】：2011-02-14 11:28:36

【问题描述】：

我正在使用 CSS3 规则“旋转”来旋转包含文本的 div。您可以在此处查看页面：http://vitaminjdesign.com/v2/socialmedia.html。我正在寻找用于旋转div 的跨浏览器支持；但是，此 CSS3 规则不适用于 IE。是否有 jQuery 选项或其他 javascript 解决方案可以产生相同的结果，并具有跨浏览器兼容性？

【参考方案1】：

使用Sandpaper，你可以使用这个CSS规则：

-sand-transform: rotate(90deg);

它适用于所有浏览器——甚至在 IE 中。

【讨论】：

和css3一样，文字渲染不流畅。这是我最好的选择，但不是很好的选择。

嗯，对于支持它的浏览器来说，它是 CSS3，并且它使用 IE 为类似 IE 的浏览器提供的 IE 专有的 CSS，所以它是您使用代码所能获得的最好的......

它并不比标准的 CSS3 好。文字在一些浏览器里还是乱七八糟的……唯一的好处就是支持IE……

【参考方案2】：

如果您希望 css 旋转与旧版本的 IE 兼容，有一个 filter progid:DXImageTransform.Microsoft.Matrix 用于此，但它只能应用一次，并且在计算出最终矩阵时涉及许多计算。

【参考方案3】：

我会使用 Raphael 和 Cufon 来处理这类事情，尽管您必须在旋转时滚动自己的自动换行，因为您必须使用 Raphael 的 print 而不是 Cufon 的 replace。这样字体是矢量，旋转以纯几何方式处理。

当前 css-rotate 的问题超出了跨浏览器的兼容性，但在支持它的浏览器中，结果通常看起来很糟糕。在我的 Firefox 3.6 中，您的站点看起来像是在不均匀基线上的混杂。我知道你问了一个具体的问题，我已尽力回答，但我对你的建议是放弃 js 库的开销来完成你想要在这里完成的工作，而只使用高质量的图像。您已经在“悬挂标签”背景图像上投入了带宽，因此向该图像添加文本的成本是最低的，而为您正确处理文本旋转问题的全新 js 库的成本将相当高。不是最先进的解决方案，我会承认的……但这就是我们今天的情况。

【讨论】：

我完全同意...但出于 SEO 目的（来自网页设计公司），这不是一个选择。