效果

本文提供一种基于css的页面翻转效果的实现方法。运行效果如下：

实现

该功能的实现过程较为简单，主要由test.html文件和flipper.css文件组成。具体代码如下：

1、test.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面翻转效果测试</title>
    <link href="./flipper.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="flipperContainer">
        <div class="flipper">
            <div class="front">翻转前</div>
            <div class="back">翻转后</div>
        </div>
    </div>
</body>
</html>

2、flipper.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 翻转动画 */
.flipperContainer{
    perspective: 1000;
}

.flipperContainer:hover .flipper{
    transform: rotateY(180deg);
}
.flipper{
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.flipperContainer,.flipper,.front,.back{
    width: 150px;
    height: 200px;
}
.front,.back{
    backface-visibility: hidden;
    position: absolute;
}
.front{
    z-index: 2;
    background-color: orange;
}
.back{
    transform: rotateY(180deg);
    background-color: lightgreen;
}

阿汤笔迹微信公众平台

关注**“阿汤笔迹”** 微信公众号，获取更多学习笔记。
原文地址：http://www.atangbiji.com/2020/09/25/flipper/
博主最新文章在个人博客 http://www.atangbiji.com/ 发布。