２つのカードを載せる
一つの記事の中に２つのカードを載せるためには、２枚目のカードのclass名などいろいろと変えないといけません。
ちょっとやってみました。これでいいのかな。
大師匠がご覧になったら、笑われるかもしれませんが・・・(^^;)
コード
<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;
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/20220704122805.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>
<p> </p>
<style><!--
.carda{
position:relative;
perspective:500px;
}
.fudab{
position:absolute;
display:inline-block;
transition:2s;
backface-visibility:hidden;
border-radius:15px;
}
.csizec{
width:200px;
height:300px;
}
#omoteb{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
#urab{
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%;
}
#tg02:checked~#omoteb{
transform:rotateY(0deg);
}
#tg02:checked~#urab{
transform:rotateY(-180deg);
}
--></style>
<div class="carda csizec"><input id="tg02" style="display: none;" type="checkbox" /> <label id="omoteb" class="fudab csizec" for="tg02">めくると出てくる文章</label> <label id="urab" class="fudab csizec" for="tg02"></label></div>
