もうひとつのブログ

「日々のこと」のサブブログ、

めくるカードの表裏に画像を入れる

めくるカードはめくると文字でしたが、表裏共に画像の場合は・・・

 

 

<style><!--
.card{
position:relative;
perspective:500px;
}
.fuda{
position:absolute;
display:inline-block;
transition:2s;
backface-visibility:hidden;
border-radius:15px;
}
.csize{
width:200px;
height:300px;
}
#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
background:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/aoisora3/20220704/20220704122805.jpg) 0 0/100% 100%;
padding:0.6em;
}
#ura{
transform:rotateY(0deg);
background:pink;
border:10px double black;
background:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/aoisora3/20220704/20220704122730.jpg) 0 0/100% 100%;
}
#tg01:checked~#omote{
transform:rotateY(0deg);
}
#tg01:checked~#ura{
transform:rotateY(-180deg);
}
--></style>
<div class="card csize"><input id="tg01" style="display: none;" type="checkbox" /> <label id="omote" class="fuda csize" for="tg01"></label> <label id="ura" class="fuda csize" for="tg01"></label></div>