CSS | 画像を立体的な斜めに傾ける方法
CSSで画像を立体的な斜めに傾ける表示サンプルとサンプルコードを紹介しています。
画像を立体的な斜めに傾ける
以下は画像を画像を立体的な方向で斜めに傾ける表示サンプルになります。
このサンプルコードでは画像タグのみで実装も可能です。
class名には「skew」という名前を付けています。
<img class="skew" src="https://1-notes.com/wp-content/uploads/2023/06/slime-2.png" alt="画像の説明">画像を立体的に、かつ斜めに傾ける場合、簡単な指定方法として「transform」プロパティの「skew」が用意されれいます。
「skew」プロパティの値は角度「deg」で指定可能で「0deg」で基準の角度、数値を与える事でX軸Y軸で立体的な傾きを表示するようになります。
img.skew {
width: 250px;
transform: skew(-30deg);
}「skew」プロパティの値はひとつでも問題ありませんが、X軸、Y軸で違う値を指定する事でより複雑な傾きを演出する事が可能です。
img.skew {
width: 250px;
transform: skew(-30deg, -10deg);
}