文字や画像を傾ける
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 */
}
