practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<style>
.エリア{position:relative;
width:800px;
height:310px;
margin-top:140px;
margin-left:20px;
border:none;
perspective:1000px;}
.フリップ{width:100%;
height:100%;
transform-style:preserve-3d;
transition:transform 0.8s;}
.フロント,.バック{position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;}
.フロント{z-index:2;}
.バック{transform:rotateY(180deg);}
.移動ぼたん{margin-top:-400px;
margin-left:0;
font-size:16px;
color:white;
background-color:rgba(0,0,0,0.5);
padding:10px 20px;
border-radius:5px;
transition:background-color 0.3s;}
.オーバーレイ{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,0);}
.オーバーレイ:hover .移動ぼたん{background-color:rgba(0,0,0,0.7);}
</style>

<p>ボタンをクリックしてピアノ楽譜をスコアと比較する.</p>
<div class="エリア">
<div class="フリップ"id="かーど">
<img src="sample_JS_031-N-P.png"class="フロント">
<img src="sample_JS_031-N-S.png"class="バック">
</div>
<div class="オーバーレイ"onclick="写真()">
<div class="移動ぼたん">ボタン</div>
</div></div>

<script>
裏=false;
function 写真()
{くるっと=document.getElementById("かーど");
if(裏)
{くるっと.style.transform="rotateY(0deg)";
裏=false;
document.querySelector(".移動ぼたん").textContent="ボタン";}
else
{くるっと.style.transform="rotateY(180deg)";
裏=true;
document.querySelector(".移動ぼたん").textContent="戻 す";}}
</script>

</html>