◀︎ G ▶︎

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

<style>
.見本の用紙{margin:0 100px 0 0;
width:360px;
height:330px;
perspective:800px;
overflow:hidden;
background: linear-gradient(90deg,rgb(250,250,250),rgb(230,230,255));
border-radius:4px;
display:flex;
justify-content:center;
align-items:top;
position:relative;
transform-style:preserve-3d;
transition:transform 0.6s;}
.裏, .表{position:absolute;
top:20px;
left:20px;
width:300px;
height:178px;
text-align:center;
border-radius:8px;
transition:transform 1s,border-width 1s;
overflow:hidden;
box-shadow:0 0 20px rgba(0,0,0,0.5);
transform-origin:center;
visibility:hidden;
justify-content:center;
align-items:center;}
.表{transform:rotateY(0deg);
visibility:visible;
background: linear-gradient(90deg,rgb(250,250,250),rgb(230,230,255));
z-index:2;}
.裏{transform:rotateY(180deg);
background: linear-gradient(90deg,rgb(22,135,237),rgb(20,55,90));
z-index:1;}
.回転 .表{transform:rotateY(180deg);
visibility:hidden;}
.回転 .裏{transform:rotateY(360deg);
visibility:visible;}
.おもて面_01{position:absolute;
top:10px;
left:24px;}
.おもて面_02{position:absolute;
top:64px;
left:24px;}
.おもて面_03{position:absolute;
top:118px;
left:24px;}
.おもて面_01 img,.おもて面_02 img,.おもて面_03 img{width:250px;}
.うら面_01{position:absolute;
top:34px;
left:150px;
transform:translate(-50%,-50%);}
.うら面_02{position:absolute;
top:68px;
left:150px;
transform:translate(-50%,-50%);}
.うら面_03{position:absolute;
top:124px;
left:150px;
transform:translate(-50%,-50%);}
.うら面_01 img,.うら面_02 img,.うら面_03 img{width:250px;}
.記入{background-color:rgba(0,0,255,0.1);
text-decoration:none;}
.はいらいと{filter:brightness(2);
box-shadow:10px 0 10px rgba(255,200,255,0.5);
transition:0.3s;}
input[type="text"]{font-size:130%;
color:#123456;
margin:0 0 20px;}
textarea{font-size:130%;
color:#123456;
width:100%;
height:80px;
margin:0 0 20px;
resize:none;
padding:8px;
border:1px solid silver;
border-radius:4px;}
.レッド img{position:absolute;
top:20px;
left:70px;
width:40px;
height:20px;
transform:rotate(-20deg);
z-index:100;}
</style>

<div class="見本の用紙">
<div class="レッド"><img src="EX_01.png"></div>
<div class="裏">
<div class="うら面_01"><img src="B_side_01.png"></div>
<div class="うら面_02"><img src="B_side_02.png"></div>
<div class="うら面_03"><img src="B_side_03.png"></div>
</div>
<div class="表">
<div class="おもて面_01"><img src="A_side_01.png"></div>
<div class="おもて面_02"><img src="A_side_02.png"></div>
<div class="おもて面_03"><img src="A_side_03.png"></div>
</div>
</div>
<p><input type="text"name="name[]"data-face="表"data-target="おもて面_01"maxlength="3"style="width:33%;"placeholder="yes / no"required> 
<input type="text"name="name[]"data-face="表"data-target="おもて面_02"maxlength="3"style="width:33%;"placeholder="yes / no"required> 
<input type="text"name="name[]"data-face="表"data-target="おもて面_03"maxlength="3"style="width:33%;"placeholder="yes / no"required>
</p>
<p><input type="text"name="data1"data-face="裏"data-target="うら面_01"maxlength="15"style="width:100%;"placeholder="お名前"required></p>
<p><input type="text"name="title"data-face="裏"data-target="うら面_02"style="width:100%;"placeholder="メール・アドレス"required></p>

<script>
!function()
{let 入力="記入",
はいらいと = "はいらいと",
文字=document.querySelectorAll("input,textarea"),
記入=document.querySelector(".見本の用紙");
let 記憶;
文字.forEach((文字)=>
文字.addEventListener("focus",()=>
{((文字,保存)=>
{console.log(記入,文字,保存),
記入.classList[保存 ?"remove":"add"]("回転"),
記憶 && 記憶.classList.remove(入力),
記憶 && 記憶.classList.remove(はいらいと);
let 読む=記入.querySelector("." + 文字.dataset.target);
読む.classList.add(入力),
読む.querySelector("img").classList.add(はいらいと);
記憶=読む;})(文字,"表"===文字.dataset.face);}));}();
</script>

</html>