No.4 - 3D 空间的卡片翻转动效

时间：2025-03-17 15:03:31

参考

①张鑫旭http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

②CODEPEN优秀 圣诞老人https://codepen.io/Alireza29675/pen/KwgwMy

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Reverse</title>

</head>

<style>

    .divin{

        /*perspective: 800px;*/

        width: 250px;

        height: 350px;

    }

    .down{

        /*perspective: 800px;*/

        width: 250px;

        height: 350px;

        position: relative;

        top:-350px;

        transform:rotateY(180deg);

    }

    .out{

        backface-visibility: hidden;

        position: absolute;

        left: 800px;

        perspective: 800px;

        width: 250px;

        height: 350px;

        transform-style: preserve-3d;

        transition: transform 0.5s linear;

    }

</style>

<body>

    <div class="out">

    <div class="divin" onclick="rotate()"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\正面.jpg" alt="up"></div>

    <div class="down"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\反面.jpg" alt="down"></div>

    </div>

</body>

<script>

    function rotate(){

    var b1 = document.querySelector(".out");

    b1.style.transform = "rotateY(180deg)";

}

</script>

</html>

主要点

①perspective属性

②transform-style:preserve-3d;

③backface-visibility:hidden

相关文章