您的位置：首页 > Web前端 > CSS

css3绘制3d翻页效果

2015-02-22 23:21 323 查看

核心内容：

1.css3的transition属性来制作简单的动画

transition属性可以为指定的css属性添加动画效果，这个动画用到的是transform属性

transition: property duration timing-function delay;

复杂的动画效果可以用keyframes来绘制

2.css3绘制3d图形旋转效果

transform属性一看名字就知道是用来改变图形形状的，包括位移translate，旋转rotate，缩放scale。所谓的3d效果一般是由图形旋转拼凑而成的，所以这里用到了transform中的rotate值，绕着y轴旋转，定义旋转轴transform-origin: right center;绘制3d图像前要在外层设置一个3d的景深和样式perspective: 800;transform-style: preserve-3d;

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition绘制翻页效果</title>
<style>
.btn{
margin:40px;
}
#book{
background-color: black;
margin: 40px;
width: 400px;
height: 200px;
padding: 0;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#page1{
position: absolute;
width: 200px;
height: 200px;
background-color: grey;
transform-origin: right center;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
-webkit-transform-origin: right center;
}
#page2, #page3, #page4{
position: absolute;
width: 200px;
height: 200px;
background-color: grey;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
transform-origin: right center;
-webkit-transform-origin: right center;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}

#left{
float: left;
background-color: black;
margin-left: 40px;
width: 200px;
height: 200px;
padding: 0;
overflow: hidden;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#right{
float: left;
background-color: black;
width: 200px;
height: 200px;
padding: 0;
overflow: hidden;
perspective: 800;
transform-style: preserve-3d;
-webkit-perspective: 800;
-webkit-transform-style: -webkit-preserve-3d;
}
#pagel1,#pagel2,#pagel3,#pagel4{
position: absolute;
width: 158px;
height: 158px;
background-color: grey;
padding: 20px;
transform-origin: right center;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
-webkit-transform-origin: right center;
border: 1px solid red;
}
#pagel2,#pagel3,#pagel4{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#pager1,#pager2,#pager3,#pager4{
position: absolute;
width: 158px;
height: 158px;
background-color: grey;
padding: 20px;
transition: transform 1s linear;
-webkit-transition: transform 1s linear;
transform-origin: left center;
-webkit-transform-origin: left center;
border: 1px solid red;
}
#pager1{
z-index: -10;
}
#pager2{
z-index: -20;
}
#pager3{
z-index: -30;
}
#pager4{
z-index: -40;
}
</style>
</head>
<body>
<div id="book">
<div id="page1">1</div>
<div id="page2">2</div>
<div id="page3">3</div>
<div id="page4">4</div>
</div>
<div class="btn">
<a href="javascript:prev()">上一页</a>  <a href="javascript:next()">下一页</a>
</div>

<div id="left">
<div id="pagel1">第1页</div>
<div id="pagel2">第3页</div>
<div id="pagel3">第5页</div>
<div id="pagel4">第7页</div>
</div>
<div id="right">
<div id="pager1">第2页</div>
<div id="pager2">第4页</div>
<div id="pager3">第6页</div>
<div id="pager4">第8页</div>
</div>
<div style="clear:both;"></div>
<div class="btn">
<a href="javascript:prev2()">上一页</a>  <a href="javascript:next2()">下一页</a>
</div>
<script>
var curIndex = 1;
function prev(){
if(1==curIndex) return;
var lPage = document.getElementById("page"+curIndex);
var llPage = document.getElementById("page"+(curIndex-1));
var rPage = document.getElementById("page"+(curIndex+1));
if(llPage)llPage.style.zIndex = 100;
if(rPage)rPage.style.zIndex = 0;
lPage.style.transform = "rotateY(180deg)";
lPage.style.webkitTransform = "rotateY(180deg)";
curIndex--;
}
function next(){
if(4==curIndex) return;
curIndex++;
var lPage = document.getElementById("page"+curIndex);
var rPage = document.getElementById("page"+(curIndex+1));
if(rPage)rPage.style.zIndex = 100;
lPage.style.transform = "rotateY(0deg)";
lPage.style.webkitTransform = "rotateY(0deg)";
}
var curPage = 1;
function prev2(){
if(1===curPage) return;
//左边翻页
var lPage = document.getElementById("pagel" + curPage);
lPage.style.transform = "rotateY(180deg)";
lPage.style.webkitTransform = "rotateY(180deg)";
//右边翻页
var rPage = document.getElementById("pager" + (curPage-1));
rPage.style.transform = "rotateY(0deg)";
rPage.style.webkitTransform = "rotateY(0deg)";
curPage--;
}
function next2(){
if(4===curPage) return;
//左边翻页
var lPage = document.getElementById("pagel" + (curPage+1));
lPage.style.transform = "rotateY(0deg)";
lPage.style.webkitTransform = "rotateY(0deg)";
//右边翻页
var rPage = document.getElementById("pager" + curPage);
rPage.style.transform = "rotateY(-180deg)";
rPage.style.webkitTransform = "rotateY(-180deg)";
curPage++;
}
</script>
</body>
</html>

这里绘制了两个图形，第一个是绕中轴进行的翻页效果，这样有个问题，就是翻页后文字内容全部反了，第二个就是为了解决这个问题，做了两个3d翻页效果拼凑起来形成一个翻书的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 3d图像

相关文章推荐

新的分享

章节导航