html - Web ページでテキストを斜めに表示することはできますか?

Question

Web ページに 40 度などの角度でテキストを作成できるかどうかを知りたいです。可能であれば、どうすればこれを行うことができますか?

編集: 最後に、Mathias Bynens の回答を使用することにしました。

Answer 1

CSS3 変換を使用します。

.selector {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}

IE は をサポートしています。この場合、rotation プロパティは、、、または要素をそれぞれ 0、90、180、または 270 度回転させるfilter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);4 つの値のいずれかを受け入れます。ただし、フィルターなので、使用はお勧めしません。0123

Answer 2

Mathias の回答に追加するには、IE でもテキストを回転できます: http://snook.ca/archives/html_and_css/css-text-rotation

ただし、90° の倍数に拘束されます。

それとは別に、回転したテキストに SVG/VML を利用できます。たとえば、このページを見てください: http://raphaeljs.com/text-rotation.html

RaphaelJS ライブラリを使用して、画像なしでクロス ブラウザーのテキストを回転します。

Answer 3

Mathias は彼の答えで正しいですが、IE もサポートするには、フィルターを使用できます。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/

その後、IEもサポートされます:)