My Vector Space

  人生は寄り道してなんぼ

文字を斜めに傾ける

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です。
回転の基準は、オブジェクトの中心になります。

 

 

PAGE TOP