[ThreeJs object ration on an angle]

How can I have an ThreeJS object rotate on an axis that is at angle.

 

Like from this codepen I made, the left square rotates on its center and moved up when you click on the "rotate up" button.

 

I want the left cure rotate along the red axis in the image attached and move along on that axis when click on the "Rotate 45 degree" button.  I can make up move along the axis, but the rotation is wrong. How can I make the cute rotate along the red axis?

 

 

See the Pen MWpYggY by eforblue (@eforblue) on CodePen

[How to simply increment movement]

Thank you very much. This is exactly what I am looking for, and it works.

[How to simply increment movement]

I would like to reverse the action on the button click.

[How to simply increment movement]

Thank you very much. That is almost what I am looking for.

If there a way to reverse the animation?

 

See the Pen mdRYvxr by eforblue (@eforblue) on CodePen

[How to simply increment movement]

Is there a way to simply moving an item by an increment with a pause in between. Like from the codepen, what if I want to repeat the increment 50 times?

See the Pen zYNQeqm by eforblue (@eforblue) on CodePen