论坛首页 › 音画教程 › 马黑黑《纯CSS实现卡片正背两面翻转》

醉美水芙蓉 发表于 2026-8-29 21:34:46

马黑黑《纯CSS实现卡片正背两面翻转》

<div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    /* body创建景深 ：800px */
    body {
      font-size: 2em;
      perspective: 800px;
    }
    /* 容器 ：提供3d场景 */
    .pa {
      width: 460px;
      height: 200px;
      transform-style: preserve-3d;
      margin: auto;
      margin-top: 200px;
      position: relative;
    }
    /* 子元素做3d转换 */
    .son {
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, lightblue, beige);
      box-shadow: 2px 2px 16px rgba(0, 0, 0, .25);
      backface-visibility: hidden; /* 背面朝向观察者时不可见 */
      /*transform: rotate3d(0, 0, 0, 0);*/
      transition: transform 1.2s;
      display: grid;
      place-items: center;
      position: absolute;
    }
    /* 第二个子元素背对观察者（注意角度为负数以确保转向衔接）*/
    .son:nth-of-type(2) {
      transform: rotate3d(0, 1, 0, -180deg);
    }
    /* 容器鼠标滑入 ：第一个子元素背对观察者 */
    .pa:hover .son:nth-of-type(1) {
      transform: rotate3d(0, 1, 0, 180deg);
    }
    /* 容器鼠标滑入 ：第二个子元素正对观察者 */
    .pa:hover .son:nth-of-type(2) {
      transform: rotate3d(0, 0, 0, 0deg);
    }
&lt;/style&gt;

&lt;div class="pa"&gt;
    &lt;div class="son"&gt;恭喜您中奖啦！&lt;/div&gt;
    &lt;div class="son"&gt;中奖金额 ：￥6666.66&lt;/div&gt;
&lt;/div&gt;
</pre></div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

klxf 发表于 2026-9-1 17:59:31

实用的教程，谢谢分享

查看完整版本: 马黑黑《纯CSS实现卡片正背两面翻转》