• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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変形しない
translateX、Y、Z軸への移動距離
scaleX、Y、Z軸への縮尺
rotate回転
skew傾斜



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください