こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「スマホやタブレットで見たときだけ、コインがフリップでめくれるようなアニメーション」を作っていきたいと思います。 前回の記事と組み合わせると、LIGブログのメンバーページと同じ仕様になります。 画像を用意 前回同様、表と裏の画像を用意します。 HTML 前回のHTMLを少しだけ修正します。JSのトリガーとなるclassを追加します。 <div class="flip js-flip"><!-- js-flipを追加 --> <div class="flip-inner js-flip-inner"><!-- js-flip-innerを追加 --> <div class="front"> <img class="thumbnail" src="https://82mou.github.io/src/images/coin-omo