请查看我的js Fiddle链接:https://jsfiddle.net/mauricederegt/5ozqg9uL/3/
var xAngle = 0;
var yAngle = 0;
var xPos = 0;
var yPos = 0;
$('body').keydown(function(evt) {
if(evt.keyCode == 37)
{
//left
yAngle -= 90;
xPos -= 100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 39)
{
//right
yAngle -= -90;
xPos -= -100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 38)
{
//up
xAngle -= -90;
yPos -= 100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
if(evt.keyCode == 40)
{
//down
xAngle -= 90;
yPos -= -100;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
}
});
#scene {
padding: 10px;
-webkit-perspective: 800;
}
#cube {
position: relative;
padding-top: 0;
margin: 0 auto;
height: 100px;
width: 100px;
-webkit-transition: -webkit-transform 0.4s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 85px;
width: 85px;
border-style: solid;
border-width: 5px;
border-color: grey;
padding: 5px;
background-color: rgba(190, 190, 190, 0.7);
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(50px);
}
#cube .two {
-webkit-transform: translateZ(50px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(50px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(50px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<div id="scene">
Press the arrow keys...
<div id="cube">
<div class="face one">
Face 1
</div>
<div class="face two">
Face 2
</div>
<div class="face three">
Face 3
</div>
<div class="face four">
Face 4
</div>
<div class="face five">
Face 5
</div>
<div class="face six">
Face 6
</div>
</div>
</div>
</body>
</html>
你可以看到我有一个CSS3 3D立方体,您可以使用箭头键移动它。您可以将其向左、向右、向上和向下移动。为了实现这一点,我在各种变量中存储位置和角度:
var xAngle = 0;
var yAngle = 0;
var xPos = 0;
var yPos = 0;
这个立方体在上下滚动时总是“正确滚动”,但左右滚动并非总是如此。
例子:
- 初始状态按左箭头键,然后按右箭头键任意次数。立方体的行为是正确的。
- 现在按下一次下箭头,再按两次左箭头(或右箭头), 立方体就会不正确地滚动。
- 但是,如果你再次按向上或向下的箭头键,它就能再次正确地上下滚动了。
因此,这个问题只似乎存在于左右滚动中。我该怎么解决这个问题?
y
再旋转x
,它会稍微靠近一点。只有当您更改轴时才会出现问题。 - Steve0