课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我的只执行两张

来源：3-2 JS部分

qq_0

2015-11-17 15:56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>3d翻页</title>

</head>

<style type="text/css">

#page3d{ -webkit-perspective:800px; -webkit-perspectiv-origin:50% 50%;overflow: hidden;}

#pagegroup{ width: 400px;height: 400px; margin: 0 auto; position: relative; 

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

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

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

transform-style: preserve-3d;}

.page{ position: absolute; width: 400px; height: 400px; line-height: 400px; text-align: center; background-color: #000; color: #fff; font-size: 300px; font-family: "微软雅黑"}

#page1{

  -webkit-transform-origin: bottom;

-moz-transform-origin: bottom;

-ms-transform-origin: bottom;

-o-transform-origin: bottom;

transform-origin: bottom;


-webkit-transition: all 1s ease-in;

-o-transition: all 1s ease-in;

transition: all 1s ease-in;

}

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

-webkit-transform-origin: bottom;

-moz-transform-origin: bottom;

-ms-transform-origin: bottom;

-o-transform-origin: bottom;

transform-origin: bottom;


-webkit-transition: all 1s ease-in;

-o-transition: all 1s ease-in;

transition: all 1s ease-in;


-webkit-transform: rotateX(90deg);

-ms-transform: rotateX(90deg);

-o-transform: rotateX(90deg);

transform: rotateX(90deg);

}


#opration{ text-align: center;}

</style>


<script type="text/javascript"> 

var curIndex=1;


function next(){

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

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


curIndex++;

var nextpage=document.getElementById('page'+curIndex);

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

}


function prev(){}

</script>

<body>

<div id="page3d">

<div id="pagegroup">

<div id="page1">1</div>

<div id="page2">2</div>

<div id="page3">3</div>

<div id="page4">4</div>

<div id="page5">5</div>

<div id="page6">6</div>

</div>

</div>


<div id="opration">

<a href="javascript:next()">next</a>

<a href="javascript:prev()">previous</a>

</div>

</body>

</html>


写回答 关注

2回答

  • Sung10086
    2015-11-18 12:39:18

    #page2,.page3,.page4,.page5,.page6  改成 #page2, #page3, #page4, #page5, #page6

    0 1
  • qq_fly_5
    2015-11-18 10:33:50

    和我一样

    0 0

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78572 学习 · 425 问题

查看课程

相似问题

为什么我的代码只显示第一张一点next就白屏了。。。。

回答 3

为什么我的第一张出来的效果是6呢

回答 2

为什么 只有第一放大的动画效果

回答 1

为什么我的是这样

回答 2

为什么我的不显示？

回答 2

打开慕课网App查看更多内容