【jQuery】ボタンや画像をクリックして要素を回転させて裏側に仕込んだ要素を表示する方法

たまに見かける下記のようなくるっと回るボタンを、ホバーではなくてクリックで回転させて、かつ裏側に仕込んだ別の要素を表示する方法をメモします。

回転

回転させる要素を用意する

回転して「表」と「裏」を表示するので、表と裏のdivの箱を用意します。
今回は単純に下記のような箱にしました。

表と裏の箱を用意したら、さら上の箱を用意して表と裏の要素にpositionを指定して重ねます。
※ちょっとわかり難いので下記では表と裏の箱を少しずらして表示しています。

現時点でのHTMLタグとCSSは下記のようになっています。

HTMLタグ

<div id="rotate-area">
  <div class="rotate-target omote" id="omote">
    <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
  </div>
  <div class="rotate-target ura" id="ura">
    <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
  </div>
</div>

CSS

.rotate-target {
    background: #d6e3ff;
    border: solid 3px #3f5fce;
    padding: 10px;
    display: inline-block;
    height: 100%;
}
.rotate-target p {
    text-align: center;
    margin: 0px !important;
}
#rotate-area {
    position: relative;
    min-height: 295px;
}
#rotate-area .rotate-target {
    position: absolute;
    transition: all 0.5s ease-out 0s;
    display: block;
    left: 0px;
    top: 0px;
    cursor: pointer;
}
#rotate-area .omote {
    z-index: 1;
    transform: rotateY(0deg);
}
#rotate-area .ura {
    z-index: 0;
    transform: rotateY(-180deg);
}

CSSの24行目と28行目に注目してほしいのですが、現時点で表の要素は回転させずにそのまま表示して、裏の要素は回転済みで表示しています。

あとは表と裏の要素にjQueryでクリックイベントを設置してz-indexとtransformを変化させるだけになります。
スクリプトは下記の通りです。

<script>
  jQuery(function($){
    $('.rotate-target').on('click',function(){
      if($(this).attr('id') == 'omote'){
        // 表クリックの場合
        $(this).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
        $('#ura').css({'z-index':'1', 'transform':'rotateY(0deg)'});
      } else {
        // 裏クリックの場合
        $(this).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
        $('#omote').css({'z-index':'1', 'transform':'rotateY(0deg)'});
      }
    });
  });
</script>

jQueryのon関数は色々なイベントに対して処理を追加することができる関数です。
詳細は下記で綺麗にまとめられていますので、興味のある方はご覧ください。
参考：【jQuery入門】on()によるイベント処理の使い方まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） – プログラミング入門者向けサイト

実際の動作は下記になります。
※クリックすると回転します。

綺麗に回りましたね！

裏の要素はクリックしないと見れないコンテンツなので、文章がメインのサイトでは使う場面が少ないと思いますが、見た目を重視するサイトではちょっとしたアクセントとして設置しても面白いかもしれませんね。