效果

本文提供一种基于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/ 发布。