ここでは画像を回転表示させるコードを紹介します。
画像を回転して表示するCSSのコード
以下の画像を回転させます
700px、467pxの画像です。
このような状態に回転させます
20度の回転です。
切り抜き表示コード
HTML表記
<div class="rotate-image">
<img src="image.jpg">
</div>CSS表記
.rotate-image {
width: 700px;
height: 650px;
}
.rotate-image img {
margin-top:100px;
transform: rotate(20deg);
}
説明 元の画像は700、467ではありますが、斜めにすることで上下左右にはみ出してしまうため、rotate-imageでボックスを大きく指定しておきます。そうすることで、回転をさせてもその他の部分への影響を抑えることができます。 margin-top:100pxとしている理由も同様で、これをしない場合、上にはみ出してしまいます。左側へのはみだしを防ぎたい場合はmargin-leftの指定を行ってください。
