欢迎光临

木子屋

标题: CSS3实现翻书效果步骤详解

作者: dnawo

日期: 2022-07-17 11:03 PM

分类: 其他

内容:
首先，定义翻开时书本的大小(200px X 200px)和纸张的大小(100px X 200px)：
复制内容到剪贴板 程序代码<style>
#book{
width: 200px;
height: 200px;
position: absolute;
}
#page{
width: 100px;
height: 200px;
left: 100px;
position: absolute;
}
#page img{
border: 1px solid #000;
}
</style>
<div id="book">
<div id="page">
<img src="images/01.jpg" />
</div>
</div>
接着，添加翻页效果：
复制内容到剪贴板 程序代码<style>
@keyframes next {
0% {transform: rotatey(0deg);}
100% {transform: rotatey(-180deg);}
}
#page {
transform-origin: left;
animation: next 3s linear forwards;
}
</style>
有点瑕疵，透视了，设置隐藏背面内容：
复制内容到剪贴板 程序代码<style>
#page {
backface-visibility:hidden;
}
</style>
怎么空白了？正常的，因为背面没有内容，在背面添加第2页：
复制内容到剪贴板 程序代码<style>
#page {
transform-style: preserve-3d;
}
#page img{
position: absolute;
}
#page img:nth-child(2){
/* 翻转第2页 */
transform: rotatey(-180deg);
/* 需单独设置背面隐藏，page设置的这边无效 */
/* 或者给img添加z-index进行覆盖 */
backface-visibility:hidden;
}
</style>
<div id="book">
<div id="page">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
</div>
</div>
继续添加其他页面，完整代码如下：
复制内容到剪贴板 程序代码<!doctype html>
<head>
<meta charset="utf-8">
<title>CSS3实现翻书效果步骤详解</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#book{
width: 200px;
height: 200px;
position: relative;
transform: rotatex(15deg);
transform-style: preserve-3d;
}
.page{
width: 100px;
height: 200px;
left: 100px;
position: absolute;

transform-origin: left;
backface-visibility:hidden;
transform-style: preserve-3d;
}
.page img{
border: 1px solid #000;
position: absolute;
}
.page img:nth-child(2){
transform: rotatey(-180deg);
backface-visibility:hidden;
}
/* 上一页关键帧 */
@keyframes prev {
0% {
transform: rotatey(-180deg);
}
100% {
transform: rotatey(0deg);
}
}
/* 下一页关键帧 */
@keyframes next {
0% {
transform: rotatey(0deg);
}
100% {
transform: rotatey(-180deg);
z-index: 999;
}
}
</style>
</head>
<body>
<div id="book">
<div class="page">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
</div>
<div class="page">
<img src="images/03.jpg" />
<img src="images/04.jpg" />
</div>
<div class="page">
<img src="images/05.jpg" />
<img src="images/end.jpg" />
</div>
</div>
<br/><br/><br/>
<button id="btnPrev">上一页</button>
<button id="btnNext">下一页</button>
<script>
.ready(function(){
let pageno = 0;
let pagecount = $(".page").length;
//设置z-index
for(let i=0;i<pagecount;i++){
$(`.page:eq(${i})`).css("z-index",pagecount-i);
}
//上一页
$("#btnPrev").click(function(){
if(pageno > 0){
$(`.page:eq(${--pageno})`).css("animation","prev 3s linear forwards");
}
})
//下一页
$("#btnNext").click(function(){
if(pageno < pagecount){
$(`.page:eq(${pageno++})`).css("animation","next 3s linear forwards");
}
})
})
</script>
</body>
</html>
DEMO下载：https://www.mzwu.com/pic/202207/css3_animation_transform.rar

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.336 ms

返回

标题: CSS3实现翻书效果步骤详解

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.336 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.430 ms

返回