没事 写的一个小玩具，废话不多说，看正文：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style type="text/css">
.kk{
position: relative;
perspective: 1800px;
margin-top: 35px;
}
.waik{
position: relative;
transform-style: preserve-3d;
width: 300px;
margin: 0 auto;
//transform: rotateY(0deg);
//animation: zhuan 5s ease-in-out 0s normal infinite running ;
}
/*@keyframes zhuan{
from{transform: rotateY(0deg)}
to{transform: rotateY(360deg)}
}*/
.waik div{
width: 300px;
height: 450px;
opacity: 0.8;
}
.first{
background-color: #FF0000;
position: absolute;
top: 0;
left: 0;
transform: translateZ(380px);
}
.two{
background-color: #FF7F00;
position: absolute;
top: 0;
left: 0;
transform: rotateY(45deg) translateZ(380px);
}
.three{
background-color: #FFFF00;
position: absolute;
top: 0;
left: 0;
transform: rotateY(90deg) translateZ(380px);
}
.four{
background-color: #00FF00;
position: absolute;
top: 0;
left: 0;
transform: rotateY(135deg) translateZ(-380px);
}
.fiv{
background-color: #00FFFF;
position: absolute;
top: 0;
left: 0;
transform: translateZ(-380px);
}
.six{
background-color: #0000FF;
position: absolute;
top: 0;
left: 0;
transform: rotateY(45deg) translateZ(-380px);
}
.seven{
background-color: #8B00FF;
position: absolute;
top: 0;
left: 0;
transform: rotateY(90deg) translateZ(-380px);
}
.eight{
background-color: slateblue;
position: absolute;
top: 0;
left: 0;
transform: rotateY(135deg) translateZ(380px);
}
</style>
</head>
<body>
<div class="kk">
<div class="waik">
<div class="first"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="fiv"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
</div>
</div>
</body>
<script type="text/javascript">
//初始旋转角度
var rotaInit=0;
//旋转长度总周长和角度比值（调节拖拉滚动的快慢效果）
var cir = 360/15000;
//console.log(cir);
var cons = {
//初始触摸的X点
startX:0,
startY:0,
//结束的触摸点
endX:0,
endY:0,
//目标初始旋转角度
//rota:rotaInit
}
//定义取X与Y的值，判断是上下滑动还是左右滑动
xOry = Math.abs(cons.endX-cons.startX)<Math.abs(cons.startY-cons.endY)?0:1;
//赋值给初始触摸点
document.querySelector(".waik").addEventListener("touchstart",function(e){
cons.startX = Number(e.targetTouches[0].pageX);
cons.startY = Number(e.targetTouches[0].pageY);
//console.log(startX+"+开始坐标+"+startY);
});
//检测手指滑动事件
document.querySelector(".waik").addEventListener("touchmove",function(e){
cons.endX = Number(e.targetTouches[0].pageX);
cons.endY = Number(e.targetTouches[0].pageY);
if(xOry==1){
e.preventDefault();
//cons.rota = rotaInit;
rotaInit = rotaInit+(cons.endX-cons.startX)*cir;
let rotaResult = document.querySelector(".waik").style.transform = "rotateY("+rotaInit+"deg)";
//判断左右滑动
if(cons.startX<=cons.endX){
//console.log("初始角度："+rotaInit);
rotaResult;
}else{
//console.log("初始角度："+rotaInit);
rotaResult;
}
}
//rotaInit = (cons.endX-cons.startX)*cir;
});
</script>
</html>
好了，代码已经粘贴完毕，有喜欢的朋友可以看一下，写的不好之处高手见谅
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)