フリップ式メンバーカード

<div class="d06-03-04-card">
          <div class="d06-03-04-inner">
            <div class="d06-03-04-face d06-03-04-front">
              <div class="d06-03-04-ava">MK</div>
              <div class="d06-03-04-name">小林 美咲</div>
              <div class="d06-03-04-role">UIデザイナー</div>
            </div>
            <div class="d06-03-04-face d06-03-04-back">
              <p>ユーザー目線の設計を大切に、使いやすさと美しさを両立させたデザインを心がけています。</p>
            </div>
          </div>
        </div>

.d06-03-04-card{width:180px;height:200px;perspective:900px}
        .d06-03-04-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
        .d06-03-04-card:hover .d06-03-04-inner{transform:rotateY(180deg)}
        .d06-03-04-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;box-shadow:0 8px 22px rgba(40,60,110,.14)}
        .d06-03-04-front{background:#fff}
        .d06-03-04-ava{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:22px;background:linear-gradient(135deg,#ff8fb1,#a86bff);margin-bottom:12px}
        .d06-03-04-name{font-weight:700;color:#243053}
        .d06-03-04-role{font-size:12px;color:#8590ad;margin-top:3px}
        .d06-03-04-back{background:linear-gradient(135deg,#6a8dff,#a86bff);color:#fff;transform:rotateY(180deg);text-align:center;font-size:13px;line-height:1.7}