1

次のように、テキスト ボックスと一部のテキストを約 30 度に揃える必要があります。 回転したテキスト

少なくとも IE と FF で動作することを望みます。ネットで見つけたものはすべて、画像の回転を扱っています。
誰？

4

6 に答える 6

5

優れたクロスブラウザー ソリューションはありません。

最新の Webkit は CSS 変換をサポートしており、そのようなことを簡単な方法で行うことができます。

理論的には HTML の回転を許可する SVGがあり<foreignContent>ますが、広くサポートされているわけではありません (サポートされている場合でも、通常は不完全でバグがあります)。

ページのデザインを変更することをお勧めします。入力の周りに境界線と影を付けて、わずかに回転しているように見える視覚的なトリックを試してください。

Javascript や Flash でのハッキングはお勧めしません。ブラウザーの入力要素は、使いやすさにとって重要です。あなたのハッキングは、パスワード マネージャー/自動入力、さまざまな標準キーボード ショートカット、テキスト選択などではうまく機能しない可能性があります。

于 2009-01-11T17:42:38.443 に答える
4

あなたの最善の策はおそらくフラッシュです。

于 2009-01-11T08:50:25.273 に答える
3

現在のブラウザーでは完全にはサポートされていませんが、(少なくとも) FF3 と IE7 では適切に動作します。canvas HTML 要素です。canvas 要素は HTML5 の一部であり、ビットマップ イメージの動的なスクリプト可能なレンダリングを可能にします。キャンバスは、高さと幅の属性を持つ HTML コードで定義された描画可能な領域で構成されます。JavaScript コードは、他の一般的な 2D API と同様の描画関数の完全なセットを介して領域にアクセスできるため、動的に生成されたグラフィックが可能になります。

Mozilla マニュアルのページに、キャンバスにテキストを描画する方法が示されています。すべてのキャンバス グラフィックを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();
  }
}
于 2009-01-11T10:44:51.313 に答える
2

PEZに同意します。これにはFlashを使用します。ただし、Safari では、CSS3 変換を使用してこれを実現できます。

于 2009-01-12T00:08:48.243 に答える
2

頭のてっぺんから、これはまだ広くサポートされていない CSS3 でしかできないことだと思います (ただし、特定のブラウザーが必要であると言える何らかの内部アプリでない限り)。

于 2009-01-11T08:47:51.800 に答える