指定画像をパース表示し、それをグリグリ動かします。以下も参考にしてください。
HTMLとCSSの様々な表現 01 HTMLとCSSだけで画像の変形表示 2023/10/07
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像にパースを付けて表示</title>
<style>
body {
background: lemonchiffon;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
perspective: 300px;
/* パースの強さ（視点の距離）
遠近感の強さ（小さいほど強くなる） */
}
/*.image-wrapper に rotateY() や rotateX() を使ってパースを表現*/
.image-wrapper {
width: 400px;
transform: rotateY(25deg) rotateX(5deg);
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
/*:hover で元の向きに戻すアニメーション*/
.image-wrapper:hover {
transform: rotateY(0deg) rotateX(0deg);
}
img {
width: 100%;
display: block;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="image-wrapper">
<img src="links/image.jpg" alt="指定画像">
</div>
</body>
</html>
実行するとパースが掛かった状態で表示されますが・・・
mouseでパースの状態を変更できます。
