どうも！LSSです！！
【CSS】カードをめくる その３ idを使わない版 - Little Strange Software
の改変で、表面・裏面とも画像にしてめくれるものを作ってみました。
コードの簡略化、class名を１つにまで削減などを行っています。
参考記事:
チェックボックスとラベルの話【HTML編】
チェックボックスとラベルの話【CSS編】
【CSS】本のページをめくるCSS【シンプルに改善版】
裏表画像めくり
画像をクリックすると裏返ります！
コード
<style><!--
/*画像が入る枠の設定*/
.imgreverse{
position:relative;
display:inline-block;
perspective:700px;/*この数字を小さくするとダイナミックな動きになります*/
width:300px;/*幅*/
height:140px;/*高さ*/
}
/*チェックボックスを非表示*/
.imgreverse input{display:none;}
/*表裏共通の設定*/
.imgreverse img{
position:absolute;
display:inline-block;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transition:2s;/*反転にかかる秒数*/
}
/*表・裏・反転した表・反転した裏 それぞれの設定*/
.imgreverse input+img{transform:rotateY(0deg);}
.imgreverse input+img+img{transform:rotateY(180deg);}
.imgreverse input:checked+img{transform:rotateY(-180deg);}
.imgreverse input:checked+img+img{transform:rotateY(0deg);}
--></style>
<label class="imgreverse">
<input type="checkbox" />
<img src="画像ファイルのURL" />
<img src="画像ファイルのURL" />
</label>
コードを簡略化した代わりに（？）、コメントを入れてみました^^
2021/9/11追記 一部コード修正しました（Safari用）
コード中、色がついた部分…
「幅」は画像を見せたいサイズに応じて変更、
「高さ」は画像の縦横比と「幅」に合わせ、
「画像ファイルのURL」の１つめは最初に見える画像、２つめはクリックすると出てくる画像のURLを指定してください。
なお、実際のところ、「高さ」を指定していても、それを超える高さの画像はそのまま表示されます。
その画像に続く要素（この記事のサンプルでいうと、画像の下に書いた「画像をクリックすると裏返ります」という文字）の表示位置に影響します。
コードの下５行、
<label class="imgreverse">
<input type="checkbox" />
<img src="画像ファイルのURL" />
<img src="画像ファイルのURL" />
</label>
が１つの「表・裏画像セット」となっており、その上の<style>～</style>が書かれたWebページ上であれば、いくつでも配置できます^^
なるべく、表の画像と裏の画像の縦横比は近いもの（横長なら横長、縦長なら縦長）を使うほうが良いと思います。
縦横比が極端に違う画像を使うとどうなるか
表画像に横長の画像、裏画像に縦長の画像を使うとどうなるか？
↓
こうなりますｗ
中の画像のサイズによって、「高さ」で指定した高さを飛び出してしまうんですね。
ちなみに、飛び出した部分をクリックしてもちゃんとめくられます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
