有粉丝私信舒工怎么做3D翻转效果，perspective今天它来了！~~-CFANZ编程社区

有粉丝私信舒工怎么做3D翻转效果，perspective今天它来了！~~_html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>骚气的翻转效果</title>
</head>
<body>
<div>透视翻转</div>
</body>
</html>
<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        perspective: 382px; /*（关键代码）多年经验告诉我这个数字是最接近人类视角的真实感*/
    }

    div {
        /*父元素需要position: relative;*/
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 100px;

        width: 200px;
        height: 100px;
        background: red;
        animation: rotate-animate 1.618s ease-in-out infinite; /*（关键代码）*/
    }

    @keyframes rotate-animate {
        0% {
            transform: rotateX(0deg);
        }
        100% {
            transform: rotateX(360deg);
        }
    }

</style>

补充：如果不想对父元素进行全局3D透视perspective定义，那么可以在需要设置透视效果的元素里面加入如下样式：

transform:perspective(1000px) rotateX(360deg);/*有时候设置全局透视不生效，就用这句代码吧！*/
perspective-origin:50% 50%;

高级一点的应用，譬如我们的弹窗出现和消失希望来点不一样的骚气效果

/*弹窗翻转出现消失效果________________________*/
.sg-alert .sg-popup-window {
    animation: sg-popup-window-hide-animate .382s ease-out forwards;
}

/*翻转消失*/
@keyframes sg-popup-window-hide-animate {
    0% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
}

.sg-alert[show] .sg-popup-window {
    animation: sg-popup-window-show-animate .382s ease-out forwards;
}

/*翻转出现*/
@keyframes sg-popup-window-show-animate {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}