クリックで配置画像がラセン回転する展開を整理してみました。
ルート階層の中に・・・
picフォルダー（image.png）
linksフォルダー（rule.css, script.js）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ラセン回転画像</title>
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<!-- 画像を配置し、container クラスを持つ div で中央に配置。
spiral-image クラスを持つ img タグを配置。 -->
<div class="container">
<img src="pic/image.png"
alt="Fish Image" class="spiral-image">
</div>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* rule.css */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: dodgerblue;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.spiral-image {
width: 300px;
height: auto;
cursor: pointer;
transition: transform 1s ease-in-out;
}
/* 回転のスピード設定 */.spiral-image.spinning {
animation: spin 4s infinite;
}
/* 回転の角度とサイズ設定 */@keyframes spin {
0% {
transform: rotate(0deg) scale(0.5);
}
25% {
transform: rotate(180deg) scale(1);
}
50% {
transform: rotate(360deg) scale(1.5);
}
75% {
transform: rotate(540deg) scale(2);
}
100% {
transform: rotate(720deg) scale(2.5);
}
}
/* rule.css */
/* script.js */
/* 画像をクリックすると、spinningクラスをトグルし、
螺旋回転アニメーションを実行 */
document.addEventListener('DOMContentLoaded', () => {
const image = document.querySelector('.spiral-image');
image.addEventListener('click', () => {
image.classList.toggle('spinning');
});
});
/* script.js */
画像をクリックしたら、こんな感じです。
