html+css横向360度翻转卡牌、div等通用写法

@keyframes rotate360X {
    from {
        transform: rotateY(0deg);
        opacity: 0;
    }
    to {
        transform: rotateY(360deg);
        opacity: 1;
    }
}

.rotate360X {
    /* infinite */
    animation: rotate360X 0.5s 1;
    transform-style: preserve-3d;
}

只需要在例如div中添加类rotate360X：即自动反转1次，infinite = 无限循环

<div class="rotate360X"><div>

×

*转载请注明出处：原文链接：https://cpp.vin/page/124.html