//AdSenseにリンク

画像を9枚並べて、クリックしたものだけ、2秒かけて720度回転してから新しい9枚の画像からランダムに差し替わり、1080度回転して止まる書き方。クリックできるのは1回だけです。

初期の画像1 初期の画像2 初期の画像3 初期の画像4 初期の画像5 初期の画像6 初期の画像7 初期の画像8 初期の画像9 
<style>
  .image {
    cursor: pointer;
    width: 200px;
    height: 200px;
    transition: transform 2s;
  }
</style>

<div>
  <img class="image" src="初期の画像1.jpg" alt="初期の画像1">
  <img class="image" src="初期の画像2.jpg" alt="初期の画像2">
  <img class="image" src="初期の画像3.jpg" alt="初期の画像3">
  <img class="image" src="初期の画像4.jpg" alt="初期の画像4">
  <img class="image" src="初期の画像5.jpg" alt="初期の画像5">
  <img class="image" src="初期の画像6.jpg" alt="初期の画像6">
  <img class="image" src="初期の画像7.jpg" alt="初期の画像7">
  <img class="image" src="初期の画像8.jpg" alt="初期の画像8">
  <img class="image" src="初期の画像9.jpg" alt="初期の画像9">
</div>

<script>
  var images = document.getElementsByClassName("image");
  var clicked = false;

  function handleClick(event) {
    if (!clicked) {
      clicked = true;
      var clickedImage = event.target;

      // クリックされた画像の回転アニメーション
      clickedImage.style.transform = "rotateY(720deg)";

      setTimeout(function() {
        // 新しい画像のリスト
        var newImages = [
          "新しい画像1.jpg",
          "新しい画像2.jpg",
          "新しい画像3.jpg",
          "新しい画像4.jpg",
          "新しい画像5.jpg",
          "新しい画像6.jpg",
          "新しい画像7.jpg",
          "新しい画像8.jpg",
          "新しい画像9.jpg"
        ];

        // クリックされた画像のみ差し替え
        clickedImage.src = newImages[Math.floor(Math.random() * newImages.length)];

        // 他の画像の回転アニメーション
        for (var i = 0; i < images.length; i++) {
          if (images[i] !== clickedImage) {
            images[i].style.transform = "rotateY(1080deg)";
          }
        }
      }, 2000);
    }
  }

  for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", handleClick);
  }
</script>

上記のコードは、9枚の画像を並べて、クリックした画像だけが回転し、他の画像は1080度で止まります。クリックは1回だけ有効です。

各画像要素にはクラス名 .image が割り当てられ、クリックイベントが追加されています。クリックイベントが発生した場合、クリックされた画像のみが回転アニメーションを開始します（450度回転）。2秒後、クリックされた画像はランダムな新しい画像に差し替えられ、他の画像は1080度回転して停止します。

このカスタムHTMLを使用すると、9枚の画像が表示され、クリックするとクリックされた画像だけが回転し、新しい画像に差し替えられます。また、クリックは1回のみ有効で、2回目以降のクリックでは回転や画像の差し替えは行われません。

JavaScript