恭喜您中奖啦（纯CSS实现卡片正背两面翻转）转自马黑黑教程

admin · 发表于昨天 22:29

<style>
    /* 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);
    }
</style>

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

admin · 发表于昨天 22:33

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

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

核心：

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

		自动登录	找回密码
密码			立即注册

恭喜您中奖啦（纯CSS实现卡片正背两面翻转） 转自马黑黑教程

恭喜您中奖啦（纯CSS实现卡片正背两面翻转）转自马黑黑教程