スポンサード

CSS3 の 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>

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

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

transform : rotate の使い方

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

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

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

文字を斜めに傾けるサンプル

ざっとこんな感じの見た目になります。

画像も斜めに傾けて置いてみる

先のテキストの場合と同様に、画像ファイルも反時計周りに10°回転させて表示してみます。

transform プロパティの値

今回はrotate の例だけでしたが、transform の値は主にこんな感じです。

none	変形しない
translate	X、Y、Z軸への移動距離
scale	X、Y、Z軸への縮尺
rotate	回転
skew	傾斜

スポンサード