Question

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

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

Answer 1

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

最新的Webkit支持CSS转换，允许以简单的方式进行此类转换。

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

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

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

Answer 2

你最好的选择可能是Flash。

Answer 3

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

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

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

关闭任何头部的顶部，我认为这是你只能在CSS3中做的事情，它还没有被广泛支持到足够使用（除非它是某种内部应用程序，你可以说某个浏览器是必需的）。

Answer 5

同意PEZ。我会用Flash来做这个。但在Safari中，您可以使用CSS3转换来实现此目的。

Answer 6

试试css3

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

但这不适用于IE

对于IE 9+（感谢Michael Potter）

-ms-transform: rotate(270deg)

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

6 个答案: