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

参考

①张鑫旭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

posted @ 2018-05-30 17:22  天才老王1993  阅读(271)  评论(0)  编辑  收藏  举报