老师，我这个上一张按钮的代码怎么写
<style>
*{margin:0px;padding:0px;}
.bo{
perspective:400;
perspective-origin:50% 50%;
overflow:hidden;
}
.box{position:relative;width:200px;height:200px;margin:50px auto;transform-style:preserve-3d;}
#maz{position:absolute;width:200px;height:200px;}
.m1{transform-origin:bottom;transition:transform 1s ease;}
.m2,.m3,.m4{transform-origin:bottom;transition:transform 1s ease;transform:rotateX(90deg);}
.op{margin-left:725px;margin-top:-40px;}
</style>
</head>
<body>
<div lass="bo">
<div class="box" id="box">
<div id="maz" class="m1"><img src="1.jpg"/></div>
<div id="maz" class="m2"><img src="2.jpg"/></div>
<div id="maz" class="m3"><img src="3.jpg"/></div>
<div id="maz" class="m4"><img src="4.jpg"/></div>
</div>
<div class="op">
<button id="top">上一张</button>
<button id="bottom">下一张</button>
</div>
</div>
<script>
//获取要操作的变量
var topp=byId("top"),
index=1,
boxx=byId("box"),
bom=byId("bottom");
//封装一个代替geElementById的函数
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//点击下一张按钮，图片以bottom为原点，以x轴旋转90deg
bom.onclick=function(){
var mazz=boxx.getElementsByTagName("div"),
zz=mazz[index];
zz.style.transform="rotateX(-90deg)";
index++;
zz.style.transform="rotateX(0deg)";
}
</script>
</body>
</html>
下一张按钮的代码实现了，但不是3d的效果，如何让他要3d效果，另外上一张按钮的代码怎么写，请老师指教
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星