[CSS]CSS3のtransformで文字を斜めに傾けて表示する方法

CSSスニペット

2013.07.02

CSS3のtransformプロパティを使って要素を斜めに傾けて表示させることが可能です。

テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。

文字を斜めに傾ける
transform プロパティの値

文字を斜めに傾ける

まずはHTML側ですが、以下のようなコードがあるとして、

<ul>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
</ul>

<ul>

</ul>

これにCSSで文字を傾ける処理をしてみます。

<ul> {
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

<ul> {

transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

}

transform : rotate の使い方

rotateで要素を回転させることができます。

rotate の中身ですが、「負」の値なら反時計回りで「正」の値なら時計回りです。
また、deg は「Degree」の略で「度」です。
※同じく「度」の単位である「grad」でもいけます。

つまり-10degなら「反時計周りに10°回転」となります。