文字を斜めに傾ける

CSS3の「transform」プロパティを使って対象物を斜めに傾けることができます。
この指定は、テキストだけでなく画像に対しても適用できます。

CSSの記述は、transformプロパティの値に「rotate」という値を指定。

記述のしかたは以下のようになります。

記述のしかた

rotate ( 回転の角度 deg )

数値は、回転させたい度数を入力します。
例えば、時計回りに30度回転させたい場合は以下のような設定をします。

 【 html 】

 1

  <ul>

 2

    <li>パスタ</li>

 3

    <li>カレー</li>

 4

    <li>牛丼</li>

 5

  </ul>

 【 css 】

 1

  ul{

 2

    transform:rotate(30deg);

 3

    -moz-transform:(30deg);

 4

    -webkit-transform:rotate(30deg);

 5

  }

また、反時計回りで回転させたい場合は、負の値(マイナス)を入力すればOKです。
回転の基準は、オブジェクトの中心になります。