Problem keeping a 3D cube correctly roll on its edges using rotate and translate

Question

Problem keeping a 3D cube correctly roll on its edges using rotate and translate

Mau*_*ice 10 javascript css jquery css-transforms

Please see my js Fiddle here: 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)";
    }
});

Run Code Online (Sandbox Code Playgroud)

#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);
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

As you can see I have a css3 3d cube which you can move by using your arrow keys. You can move it to the left, to the right, up and down. To achieve this I store the position and angle in various vars:

var xAngle = 0;
var yAngle = 0;
var xPos  = 0;
var yPos  = 0;

Run Code Online (Sandbox Code Playgroud)

The cube always "rolls" correctly on its edges going up or down, but for left and right this is not always the case.

Example:

At start press the left arrow key and the right as many times as you like. The cube behaves correctly
Now press down once and then left twice (or right) again. The cube now rolls incorrectly
BUT, if you press up or down again, it rolls correctly again going up or down

So the issue only seems to be with going left or right. How can I fix this?

Answer 1

小智 -1

看来您的问题是平移都是相对于原始方向发生的，并且您没有考虑到每次旋转时正 x,y 都不同的事实。

归档时间：	4 年，8 月前
查看次数：	158 次
最近记录：	4 年，8 月前