问答详情
源自：3-1 创建3D动画效果结构部分

请麻烦帮忙看一下怎么回事

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.my3dspace{

-webkit-perspective: 800;

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

overflow: hidden;

}

.pagegroup{

width: 400px;

height: 400px;

margin: 0 auto;

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

position: relative;

}

.page{

width: 360px;

height: 360px;

padding: 20px;

background-color: black;

color: white;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

position: absolute;

}

#page1{

-webkit-transform-origin: bottom;

-webkit-transition: transform 1s linear;

}

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

-webkit-transform-origin: bottom;

-webkit-transition: transform 1s linear;

-webkit-transform: rotateX(90deg);

}

.op{

text-align: center;

margin: 40px auto;

}

</style>

<script type="text/javascript">

var curIndex =1;

function next(){

if(curIndex==6)

return;

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

curPage.style.transform="rotateX(-90deg)";

curIndex ++;

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

nextPage.style.transform="rotateX(0deg)";

}

function prev(){

if(curIndex==1)

return;

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

curPage.style.transform="rotateX(90deg)";

curIndex --;

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

nextPage.style.transform="rotateX(0deg)";

}

</script>

</head>

<body>

<div class="my3dspace">

<div class="pagegroup">

<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="op">

<a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">prev</a>

</div>

</body>

</html>


提问者：qq_慕九州7040881 2020-05-26 17:30

个回答