为了账号安全,请及时绑定邮箱和手机立即绑定
关注
Emily梦

page1翻过去后会有阴影

设置page-group height为100px时:

http://img.mukewang.com/58e872630001d36301610161.jpg

设置page-group height为200px时:

http://img.mukewang.com/58e872640001449e01630258.jpg

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>正方体翻页3D效果</title>

<style type="text/css">

.container{

-webkit-perspective: 800px;

-webkit-perspective-origin:50% 50%;

}

.page-group{

width:200px;

height:200px;/*设置width为100px的话page2.。。会有高度???*/

margin:10px auto;

position:relative;

-webkit-transform-style:preserve-3d;

}

.page{

width:100px;

height:100px;

background:#000;

text-align:center;

color:#fff;

font-size:100px;

line-height: 100px;

position:absolute;

-webkit-transform-origin:bottom;

-webkit-transition:-webkit-transform 0.5s linear;

}

#page1{

}

#page2,#page3,#page4,#page5,#page6{

-webkit-transform:rotateX(90deg);


}

.operation{

width:200px;

margin:0 auto;

}

</style>

</head>

<body>

<div class="container">

<div class="page-group">

<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 class="operation">

<button id="next">next</button>

<button id="prev">prev</button>

</div>


<script type="text/javascript">

var curIndex=1;

var next=document.getElementById("next");

var prev=document.getElementById("prev");

next.onclick=function(){

if(curIndex==6){

return;

}

var curElem=document.getElementById("page"+curIndex);

curIndex++;

var nextElem=document.getElementById("page"+curIndex);

curElem.style.webkitTransform="rotateX(-90deg)";

nextElem.style.webkitTransform="rotateX(0deg)";

}

prev.onclick=function(){

if(curIndex==1){

return;

}

var curElem=document.getElementById("page"+curIndex);

curIndex--;

var prevElem=document.getElementById("page"+curIndex);

curElem.style.webkitTransform="rotateX(90deg)";

prevElem.style.webkitTransform="rotateX(0deg)";

}

</script>

</body>

</html>


2017-04-08 源自:CSS3 3D 特效 644 浏览 1 回答

浏览器问题,我用360也会有,有些动画还放不出来,换其他浏览器试试

2017-08-16
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信