马黑黑 发表于 2026-8-24 12:39

恭喜您中奖啦（纯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>

马黑黑 发表于 2026-8-24 12:47

一楼演示属原创帖。思路：

卡片使用两个叠加的子元素做成。开始时，第一个不做任何变换（可见），第二个在Y轴做-180度翻转（不可见）；鼠标指针移入容器，两个子元素均做相应的翻转：第一个转为背对观察者（不可见）、第二个正对观察者（可见）。

核心：

（一）设置3d转换环境（body的 perspective、.pa 的 transform-style、.son 的 transform）；
（二）子元素 .son 的 backface-visibility 属性设置；
（三）.pa 的两个 hover 伪类选择器设置，分别指向子元素 .son:nth-of-type(1/2)

梦江南 发表于 2026-8-24 12:49

谢谢黑黑老师，我中奖了!{:4_173:}

马黑黑 发表于 2026-8-24 12:50

梦江南 发表于 2026-8-24 12:49
谢谢黑黑老师，我中奖了!

今晚请客

梦江南 发表于 2026-8-24 19:45

马黑黑 发表于 2026-8-24 12:50
今晚请客

好，黑黑老师想吃什么，随你挑。{:4_173:}

马黑黑 发表于 2026-8-24 21:09

梦江南 发表于 2026-8-24 19:45
好，黑黑老师想吃什么，随你挑。

上菜了木有

杨帆 发表于 2026-8-24 23:37

思路新颖的原创，谢谢马老师直观演示{:4_190:}

霜染枫丹 发表于 2026-8-25 08:21

马老师上午好！

我早上遛弯在店里吃点早点，拿出手机付账，看到没中奖，忽然想起来昨晚玩了半天忘记顶帖了，{:4_173:}
这则很漂亮，可以用做视频的标题，LOGO,黑很生动，果断抱走，谢您分享！秋安~~
{:4_204:}{:4_190:}

红影 发表于 2026-8-25 15:02

这个有趣，随着鼠标的切入，两个面便翻转变化。内容设置也很有趣{:4_173:}{:4_199:}

马黑黑 发表于 2026-8-26 13:42

红影 发表于 2026-8-25 15:02
这个有趣，随着鼠标的切入，两个面便翻转变化。内容设置也很有趣

感谢领导支持

马黑黑 发表于 2026-8-26 13:42

霜染枫丹 发表于 2026-8-25 08:21
马老师上午好！

我早上遛弯在店里吃点早点，拿出手机付账，看到没中奖，忽然想起来昨晚玩了半天忘记顶帖 ...

顶帖手气好

马黑黑 发表于 2026-8-26 13:43

杨帆 发表于 2026-8-24 23:37
思路新颖的原创，谢谢马老师直观演示

{:4_190:}

梦江南 发表于 2026-8-26 16:37

马黑黑 发表于 2026-8-24 21:09
上菜了木有

黑黑老师，刚刚上了满汉全食，欢迎你，吃个够！{:4_204:}
https://www.huachaowang.com/thread-95917-1-1.html

小辣椒 发表于 2026-8-26 20:47

这个是新产品了{:4_170:}

马黑黑 发表于 2026-8-26 21:49

小辣椒 发表于 2026-8-26 20:47
这个是新产品了

中奖产品

马黑黑 发表于 2026-8-26 21:50

梦江南 发表于 2026-8-26 16:37
黑黑老师，刚刚上了满汉全食，欢迎你，吃个够！
https://www.huachaowang.com/thread-95917-1- ...

谢了，不过俺对满汉全席没有兴趣

梦江南 发表于 2026-8-27 08:38

马黑黑 发表于 2026-8-26 21:50
谢了，不过俺对满汉全席没有兴趣

来，上三菜一汤：




马黑黑 发表于 2026-8-27 13:29

梦江南 发表于 2026-8-27 08:38
来，上三菜一汤：

这个好，够俺一个人享用。谢谢

梦江南 发表于 2026-8-27 16:30

马黑黑 发表于 2026-8-27 13:29
这个好，够俺一个人享用。谢谢

不客气，中奖了，是要请客的。{:4_205:}

马黑黑 发表于 2026-8-28 21:38

梦江南 发表于 2026-8-27 16:30
不客气，中奖了，是要请客的。

应该的
页: [1]
查看完整版本: 恭喜您中奖啦（纯CSS实现卡片正背两面翻转）