CSS3 卡片翻转(transform)

最新推荐文章于 2024-09-02 09:11:40 发布

葡萄干是个程序员

最新推荐文章于 2024-09-02 09:11:40 发布

阅读量3.8k

点赞数 1

分类专栏： Web前端文章标签： html css3 transform 卡片翻转

本文链接：https://blog.csdn.net/qq_15096707/article/details/50988748

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

这里只考虑chrome的兼容。

card1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片翻转——以下边为轴</title>
    <style>
        #my3dspace {
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

            overflow: hidden;
        }
        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 100px auto 0 auto;

            -webkit-transform-style: preserve-3d;
            position: relative;
        }
        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;
            color: white;

            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;
        }

        #page1 {
            -webkit-transform-origin: bottom; /*设置旋转元素的基点位置（以x轴）*/
            -webkit-transition: -webkit-transform 1s linear;
        }
        #page2,#page3,#page4,#page5,#page6 {
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;

            -webkit-transform: rotateX(90deg); //沿着x轴进行90°的翻转（平躺）
        }

        #op {
            text-align: center;
        }
        #op a {
            display: inline-block;
            margin: 20px;
            text-decoration: none;

            color: #696969;
            border: 1px solid #CCC;
            padding: 10px 20px;
        }
        #op a:hover {
            background-color: #ABCDEF;
            color: #FFF;
        }
    </style>

    <script>
        var cur = 1;
        function next() {
            if(cur == 6)
                return;

            document.getElementById("page" + cur).style.webkitTransform = "rotateX(-90deg)";
            cur++;
            document.getElementById("page" + cur).style.webkitTransform = "rotateX(0)";
        }
        function previous() {
            if(cur == 1)
                return;

            document.getElementById("page" + cur).style.webkitTransform = "rotateX(90deg)";
            cur--;
            document.getElementById("page" + cur).style.webkitTransform = "rotateX(0)";
        }
    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next()">next</a> <a href="javascript:previous()">previous</a>
    </div>
</body>
</html>

运行结果如下：

点击next：

点击previous：

card2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片翻转——以左边翻转</title>
    <style>
        #my3dspace {
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;

            overflow: hidden;
        }
        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 100px auto;

            -webkit-transform-style: preserve-3d;
            position: relative;
        }
        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            font-size: 360px;
            line-height: 360px;
            background-color: black;
            color: white;
            text-align: center;
            position: absolute;
            font-weight: bold;
        }

        #page1 {
            -webkit-transform-origin: left;
            -webkit-transition: -webkit-transform 1s ease-in;
        }
        #page2, #page3, #page4, #page5, #page6 {
            -webkit-transform-origin: left;
            -webkit-transition: -webkit-transform 1s ease-in;

            -webkit-transform: rotateY(0);
        }

        #op {
            text-align: center;
        }
        #op a {
            display: inline-block;
            margin: 20px;
            text-decoration: none;

            color: #696969;
            border: 1px solid #CCC;
            padding: 10px 20px;
        }
        #op a:hover {
            background-color: #ABCDEF;
            color: #FFF;
        }
    </style>
    <script>
        var cur = 1;
        function next() {
            if(cur == 7)
                return;

            document.getElementById("page" + cur).style.webkitTransform = "rotateY(-160deg)";
            cur++;
        }

        function previous() {
            if(cur == 0)
                return;
            cur--;
            document.getElementById("page" + cur).style.webkitTransform = "rotateY(0)";
        }
    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page"></div>
            <div class="page" id="page6">6</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page1">1</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next()">next</a> <a href="javascript:previous()">previous</a>
    </div>
</body>
</html>

运行结果如下：