JavaScriptとCSSで画像をクリックすると回転して2枚目を表示してテキスト表示は1/2でランダム

2023-07-17

画像にCSSのクラス名最初を「trt2」2枚目を「trt3」を入れた

結果

<p>結果</p>
<p id="result2">結果</p>
<script>
var getresult2=document.getElementById("result2");
var image2=document.getElementsByClassName("trt2"); 
var image3=document.getElementsByClassName("trt3"); 
image2[0].addEventListener("click",function(){
image2[0].classList.toggle("clickitem");
setTimeout(function(){
image2[0].style.display="none";
image3[0].style.display="block";
},2000);
setTimeout(function(){
image3[0].classList.toggle("clickitem3");
},1000);
if(Math.floor(Math.random() * 2)==1){
getresult2.innerHTML="ﾗｯｷｰｶﾗｰはﾋﾟﾝｸです";
}else{
getresult2.innerHTML="ﾗｯｷｰカラーはレッドです";
}
}); 
</script>
<style>
.clickitem{
transition: 2s;
transform:rotateY(450deg);
}
</style>
<style>
.trt3{
display:none;
}
.clickitem3{
animation-name: animation;
animation-duration:3s;
}
@keyframes animation{
  0%{
    transform:rotateY(90deg);
  }
  100%{
    transform:rotateY(1080deg);
  }
}
</style>

関連