フリップカード

<div class="scene05-01-04">
          <div class="inner05-01-04">
            <div class="face05-01-04 front05-01-04">
              <div class="icon05-01-04">Aoi</div>
              <h4>デザイナー</h4>
              <p>ホバーで詳細を表示</p>
            </div>
            <div class="face05-01-04 back05-01-04">
              <h4>青井 さくら</h4>
              <p>UI/UXデザイン歴8年。ブランドサイトのデザインを中心に活動しています。</p>
            </div>
          </div>
        </div>

.prev.d05-01-04{background:#f1f2f5}
        .d05-01-04 .scene05-01-04{width:200px;height:210px;perspective:900px;cursor:pointer}
        .d05-01-04 .inner05-01-04{
          position:relative;width:100%;height:100%;
          transform-style:preserve-3d;
          transition:transform .7s cubic-bezier(.4,.1,.2,1);
        }
        .d05-01-04 .scene05-01-04:hover .inner05-01-04{transform:rotateY(180deg)}
        .d05-01-04 .face05-01-04{
          position:absolute;inset:0;border-radius:14px;
          backface-visibility:hidden;-webkit-backface-visibility:hidden;
          display:flex;flex-direction:column;align-items:center;justify-content:center;
          text-align:center;padding:18px;box-shadow:0 6px 16px rgba(20,25,40,.15);
        }
        .d05-01-04 .front05-01-04{background:#fff}
        .d05-01-04 .icon05-01-04{
          width:64px;height:64px;border-radius:50%;margin-bottom:12px;
          background:linear-gradient(135deg,#8ea6e8,#5b74c4);
          color:#fff;font-size:13px;font-weight:700;
          display:flex;align-items:center;justify-content:center;
        }
        .d05-01-04 .front05-01-04 h4{margin:0 0 6px;font-size:14px;color:#222}
        .d05-01-04 .front05-01-04 p{margin:0;font-size:10.5px;color:#999}
        .d05-01-04 .back05-01-04{
          background:linear-gradient(150deg,#43508a,#2b3560);color:#fff;
          transform:rotateY(180deg);
        }
        .d05-01-04 .back05-01-04 h4{margin:0 0 10px;font-size:14px}
        .d05-01-04 .back05-01-04 p{margin:0;font-size:11px;line-height:1.7;opacity:.9}