Skip to main content

Rotate a Cube

You can rotate the cube using two axes.

1
2
3
4
5
6
<div>
<p>You can rotate the cube using two axes.</p>
<div id="area">
<div id="box">
<div class="face metal-linear" style="-webkit-transform:rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px);">1</div>
<div class="face metal-linear" style="-webkit-transform:rotateY(-90deg) translate3d(0px,-50px,100px);">2</div>
<div class="face metal-linear" style="-webkit-transform:rotateY(90deg) translate3d(0px,-50px,0px);">3</div>
<div class="face metal-linear" style="-webkit-transform:rotateX(90deg) translate3d(-50px,0px,100px);">4</div>
<div class="face metal-linear" style="-webkit-transform:rotateY(180deg) translate3d(50px,-50px,50px);">5</div>
<div class="face metal-linear" style="-webkit-transform:rotateX(-90deg) translate3d(-50px,0px,0px);">6</div>
</div>
</div>
</div>
const box = document.getElementById("box");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
rotateX: {
range: [0, 360],
circular: true
},
rotateY: {
range: [0, 360],
circular: true
}
}, {
deceleration: 0.0024
});

// 2. attach event handler
axes.on("change", ({pos}) => {
box.style[eg.Axes.TRANSFORM] =
`rotateY(${pos.rotateX}deg) rotateX(${pos.rotateY}deg)`;
});

// 3. Initialize a inputType and connect it
axes.connect("rotateX rotateY", new eg.Axes.PanInput("#area")).connect("rotateX rotateY", new eg.Axes.MoveKeyInput("#area", {scale: [10, -10]}));

// 4. move to position
axes.setTo({
"rotateX": 40,
"rotateY": 315
}, 100);