1

我必须将文本框和一些文本对齐大约 30 度，如下所示： 旋转文本

我希望它至少在 IE 和 FF 中工作。我在网上找到的所有内容都涉及图像旋转。
任何人？

4

6 回答 6

5

没有好的跨浏览器解决方案。

最新的 Webkit 支持 CSS 转换，以直接的方式允许这样的事情。

SVG 中有<foreignContent>理论上允许旋转 HTML，但它没有得到广泛支持（而且在支持它的地方，它通常是不完整的和错误的）。

我建议你改变页面的设计。尝试在输入周围使用边框和阴影的视觉技巧，使其看起来略微旋转。

我建议不要使用 Javascript 或 Flash 进行黑客攻击。浏览器的输入元素对可用性很重要。您的 hack 可能无法与密码管理器/自动填充、各种标准键盘快捷键、文本选择等配合使用。

于 2009-01-11T17:42:38.443 回答
4

您最好的选择可能是 Flash。

于 2009-01-11T08:50:25.273 回答
3

当前浏览器不完全支持，但在 FF3 和 IE7 上（至少）可以正常工作，是canvas HTML 元素。canvas 元素是 HTML5 的一部分，允许对位图图像进行动态可编写脚本渲染。画布由 HTML 代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript 代码可以通过与其他常见 2D API 类似的全套绘图功能访问该区域，从而允许动态生成图形。

Mozilla 手册中的一页展示了如何在画布上绘制文本。所有画布图形都可以rotate(angle)应用。该示例使用旋转方法以圆形图案绘制形状。：

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}
于 2009-01-11T10:44:51.313 回答
2

无论如何，我认为这是你只能在 CSS3 中做的事情，它还没有得到足够广泛的支持（除非它是某种内部应用程序，你可以说需要某个浏览器）。

于 2009-01-11T08:47:51.800 回答
2

同意PEZ。我会为此使用 Flash。但在 Safari 中，您可以使用 CSS3 转换来完成此操作。

于 2009-01-12T00:08:48.243 回答
1

试试css3

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

但这不适用于 IE

对于 IE 9+（感谢 Michael Potter）

-ms-transform: rotate(270deg)
于 2013-10-21T13:00:41.063 回答