[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法
スポンサード
これに CSS で文字を傾ける処理をしてみます。
rotate の中身ですが、「負」の値なら反時計回りで「正」の値なら時計回りです。
また、deg は「Degree」の略で「度」です。
※同じく「度」の単位である「grad」でもいけます。
つまり
スポンサード
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 | 傾斜 |
参考ページ
transform-CSS3リファレンス
transform-CSS3リファレンス
スポンサード
コメント