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

【问题标题】：Is there a way to rotate text input?有没有办法旋转文本输入？
【发布时间】：2010-09-30 18:16:52
【问题描述】：

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

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

【问题讨论】：

您可以在所有现代浏览器中使用 css3 转换，如前所述，对于 IE - 您可以使用矩阵转换 -msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

标签： html css text-rendering text-styling text-rotation

【解决方案1】：

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

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

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

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

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

【讨论】：

看来我们要改变设计了。你写的是输入元素很重要，尤其是在这种情况下，它是一个登录表单。

【解决方案2】：

您最好的选择可能是 Flash。

【讨论】：

【解决方案3】：

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

Mozilla Manual 中的一页展示了如何在画布上绘制文本。所有画布图形都可以应用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();
  }
}

【讨论】：

画布很酷。此 Web 应用程序大量使用它：mindmeister.com
虽然这可能有效，但我怀疑不使用真正的输入元素会导致很多可用性问题（文本选择？密码管理器？unicode 和双向文本？）

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

试试css3

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

但这在 IE 上不起作用

对于 IE 9+（感谢 Michael Potter）

-ms-transform: rotate(270deg)

【讨论】：

添加-ms-transform: rotate(270deg); IE9+ 支持