有没有办法旋转文本输入？

Question

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

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

Answer 1

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

最新的 Webkit 支持 CSS 转换，可以以简单的方式实现此类操作。

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

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

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

Answer 2

你最好的选择可能是Flash。

Answer 3

在当前浏览器上不完全支持，但（至少）在 FF3 和 IE7 上可以正常工作画布 HTML 元素。 canvas 元素是 HTML5 的一部分，允许对位图图像进行动态脚本化渲染。
Canvas 由 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();
  }
}

Answer 4

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

Answer 5

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

Answer 6

尝试 css3

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

但这不适用于 IE

For IE 9+ (感谢 Michael Potter)

-ms-transform: rotate(270deg)