パーツ番号 08-05-02 ・ JavaScript使用

3Dコインフリップ

クリックするたびにコインが縦回転して表裏が切り替わります。抽選・キャンペーン企画やゲーミフィケーション要素の演出に使えます。

clickjs3d

プレビュー

ソースコード

HTML

<div class="d08-05-02-wrap">
          <div class="d08-05-02-stage">
            <div class="d08-05-02-coin">
              <div class="d08-05-02-face d08-05-02-front">表</div>
              <div class="d08-05-02-face d08-05-02-back">裏</div>
            </div>
          </div>
          <p class="d08-05-02-hint">コインをクリック</p>
        </div>

CSS

.d08-05-02-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-05-02-stage{perspective:600px}
        .d08-05-02-coin{position:relative;width:96px;height:96px;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.1,.2,1);cursor:pointer}
        .d08-05-02-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;backface-visibility:hidden;box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
        .d08-05-02-front{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#78350f}
        .d08-05-02-back{background:linear-gradient(135deg,#fcd34d,#eab308);color:#78350f;transform:rotateY(180deg)}
        .d08-05-02-hint{margin:0;font-size:11px;color:#94a3b8}

JavaScript

(function(){
        var root=document.getElementById('item-08-05-02');if(!root)return;
        var coin=root.querySelector('.d08-05-02-coin');
        var n=0;
        coin.addEventListener('click',function(){
          n++;
          coin.style.transform='rotateY('+(n*900)+'deg)';
        });
      })();

クラス名 .d08-05-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。