My Vector Space

  人生は寄り道してなんぼ

CSS3のtransformで文字を斜めに傾ける

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

htmlとcssの記述例は以下になります。

 【 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
  }

 値は、回転させたい度数を入力する。   この設定の場合は時計回りに30度回転させる

 ことができる。

 反時計回りで回転させたい場合は負の値を入力。  

 

 

PAGE TOP