文字や画像を傾ける

CSS3のtransformプロパティを使用することで、文字や画像を傾けることができます。

傾きます。傾きます。

.slope1 {
-webkit-transform: rotate(-10deg);  /* chrome、safari */
-moz-transform: rotate(-10deg);  /* firefox */
margin:0px 0px 100px 0px;
}

通常の場合

傾きを適用した場合

.slope2 {
-webkit-transform: rotate(10deg); /* chrome、safari */
-moz-transform: rotate(10deg); /* firefox */
margin:30px 0px 30px 0px;
}

-webkit-transformでchrome・safari、-moz-transformでfirefox対応となります。
傾きの角度は rotate(10deg) のようにrotate(数字deg)で指定します。
なおtransformプロパティでは拡大・縮小、ゆがみ、移動といったこともできます。

縮小

.syukusyo {
-webkit-transform: scale(0.5); /* chrome、safari */
-moz-transform: rotate(0.5); /* firefox */
}

拡大

.kakudai {
-webkit-transform: scale(1.5); /* chrome、safari */
-moz-transform: rotate(1.5); /* firefox */
}

ゆがみ

.yugami {
-webkit-transform: skew(10deg); /* chrome、safari */
-moz-transform: skew(10deg); /* firefox */
}

移動

.idou {
-webkit-transform: translate(400px); /* chrome、safari */
-moz-transform: translate(400px); /* firefox */
}

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る