Web特效——简单卡片翻转效果

最新推荐文章于 2024-08-05 22:20:56 发布

BlackCarbo

最新推荐文章于 2024-08-05 22:20:56 发布

阅读量3.7k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/weixin_42029090/article/details/80769843

版权

Web 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

将网上找到的一个方法进行了修改，实现通过非按钮点击进行卡片左右反转，根据反转次数显示当前面的信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my</title>
    <style>
        #goAfter,
        #goBefore{
            width: 20px;
            height: 20px;
            border-style: solid;
            padding: 10px 10px;
            background-color: #dbde1b;
        }
        .courseLogo{
            width: 120px;
            height: 132px;
            float: left;
            margin-top: 1px;
            position: absolute;
            box-sizing: border-box;
            perspective: 800px;
        }
        .courseBefore{
            width: 100%;
            height: 100%;
            position: absolute;
			background-color: pink;
            background-repeat: no-repeat;
            backface-visibility: hidden;
            transition: 1s;   
        }
        .courseAfter{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: dodgerblue;
            transform: rotateY(-180deg);
            backface-visibility: hidden;
            transition: 1s;
        }
        .courseLogo:hover .courseBefore{
            transform: rotateY(180deg);
        }
        .courseLogo:hover .courseAfter{
            transform: rotateY(0deg);
        }
    </style>
    <script>
        var angle1=0;
        var angle2=-180;
        var t =0;
        var tp = 0;
        var page=new Array("page1","page2","page3");
                function ff(a) {
                    if(a=="1"){
                document.getElementById('id1').style.display='none';
                document.getElementById('id2').style.display='inline';
            }else{
                document.getElementById('id1').style.display='inline';
                document.getElementById('id2').style.display='none';
            }
        }
        function goc(c) {
            if(c=="A"){
                angle1+=180;
                angle2+=180;
                tp=(++tp)%3;
                t++;
                var k1='rotateY('+angle1+'deg)';
                var k2='rotateY('+angle2+'deg)';
                document.getElementById('courseBefore').style.transform= k1;
                document.getElementById('courseAfter').style.transform= k2;
                document.getElementById('a1').innerText=angle1;
                document.getElementById('a2').innerText=angle2;
                if(t%2==0){
                    document.getElementById('courseBefore').innerText=page[tp];
                }else{
                    document.getElementById('courseAfter').innerText=page[tp];
                }
            }else{
                angle1-=180;
                angle2-=180;
                tp=(--tp+3)%3;
                t--;
                var k1='rotateY('+ angle1 +'deg)';
                var k2='rotateY('+ angle2 +'deg)';
                document.getElementById('courseBefore').style.transform= k1;
                document.getElementById('courseAfter').style.transform= k2;
                document.getElementById('a1').innerText=angle1;
                document.getElementById('a2').innerText=angle2;
                if(t%2==0){
                    document.getElementById('courseBefore').innerText=page[tp];
                }else{
                    document.getElementById('courseAfter').innerText=page[tp];
                }
            }
        }
    </script>
</head>
<body>
<div id="goAfter" title="A" οnclick="goc(this.title)">Left</div>
<div id="goBefore"title="B" οnclick="goc(this.title)">Right</div>
<div>
    <p><b>angle1:</b><i id="a1">0</i></p>
    <p><b>angle2:</b><i id="a2">180</i></p>
</div>
<div class="courseLogo">
    <div id="courseBefore" class="courseBefore">page1</div>
    <div id="courseAfter" class="courseAfter">page2</div>
</div>
</body>
</html>