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

醉美水芙蓉

<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>