Rotate a Cube
You can rotate the cube using two axes.
- JavaScript
- React
- Vue@2
- Vue@3
- Svelte
<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);
import React, { useEffect, useRef } from "react";
import { useAxes, PanInput, MoveKeyInput } from "@egjs/react-axes";
import "../../css/demos/cube.css";
export default function Cube() {
const { connect, setAxis, offsetX, offsetY, rotateX, rotateY } = useAxes(
{
offsetX: {
range: [0, 0],
startPos: 0,
},
offsetY: {
range: [-25, 25],
startPos: 0,
},
rotateX: {
range: [0, 360],
circular: true,
startPos: 40,
},
rotateY: {
range: [0, 360],
circular: true,
startPos: 315,
},
},
{
deceleration: 0.0024,
},
);
useEffect(() => {
const cubearea = document.getElementById("area");
const areaWidth = cubearea.getBoundingClientRect().width;
setAxis({
offsetX: {
range: [-(areaWidth / 4), areaWidth / 4],
},
});
connect("offsetX offsetY", new PanInput("#area", { inputButton: ["right"] }));
connect("rotateX rotateY", new PanInput("#area"));
connect("rotateX rotateY", new MoveKeyInput("#area", { scale: [10, -10] }));
}, []);
return (
<div>
<p>You can rotate the cube using two axes.</p>
<div id="area">
<div id="container" style={{ transform: `translate3d(${offsetX}px, ${offsetY}px, 0)` }}>
<div id="box" style={{ transform: `rotateY(${rotateX}deg) rotateX(${rotateY}deg)` }}>
<div className="face metal-linear" style={{ transform: "rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px)" }}>1</div>
<div className="face metal-linear" style={{ transform: "rotateY(-90deg) translate3d(0px,-50px,100px)" }}>2</div>
<div className="face metal-linear" style={{ transform: "rotateY(90deg) translate3d(0px,-50px,0px)" }}>3</div>
<div className="face metal-linear" style={{ transform: "rotateX(90deg) translate3d(-50px,0px,100px)" }}>4</div>
<div className="face metal-linear" style={{ transform: "rotateY(180deg) translate3d(50px,-50px,50px)" }}>5</div>
<div className="face metal-linear" style={{ transform: "rotateX(-90deg) translate3d(-50px,0px,0px)" }}>6</div>
</div>
</div>
</div>
</div>
);
};
<template>
<div class="App">
<p>You can rotate the cube using two axes.</p>
<div id="area" ref="area">
<div id="container" ref="container">
<div id="box" ref="box" :style="{ transform: `rotateY(${rotateX}deg) rotateX(${rotateY}deg)` }">
<div class="face metal-linear" :style="{ transform: 'rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px)' }">1</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(-90deg) translate3d(0px,-50px,100px)' }">2</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(90deg) translate3d(0px,-50px,0px)' }" >3</div>
<div class="face metal-linear" :style="{ transform: 'rotateX(90deg) translate3d(-50px,0px,100px)' }">4</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(180deg) translate3d(50px,-50px,50px)' }">5</div>
<div class="face metal-linear" :style="{ transform: 'rotateX(-90deg) translate3d(-50px,0px,0px)' }">6</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted } from "@vue/composition-api";
import { PanInput, useAxes } from "@egjs/vue2-axes";
export default defineComponent({
name: "App",
setup() {
const area = ref(null);
const { connect, rotateX, rotateY } = useAxes(
{
rotateX: {
range: [0, 360],
circular: true,
startPos: 40,
},
rotateY: {
range: [0, 360],
circular: true,
startPos: 315,
},
},
{
deceleration: 0.0024,
});
onMounted(() => {
connect("rotateX rotateY", new PanInput(area));
});
return {
area,
rotateX,
rotateY,
};
},
});
</script>
<template>
<div class="App">
<p>You can rotate the cube using two axes.</p>
<div id="area" ref="area">
<div id="container" ref="container">
<div id="box" ref="box" :style="{ transform: `rotateY(${rotateX}deg) rotateX(${rotateY}deg)` }">
<div class="face metal-linear" :style="{ transform: 'rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px)' }">1</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(-90deg) translate3d(0px,-50px,100px)' }">2</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(90deg) translate3d(0px,-50px,0px)' }" >3</div>
<div class="face metal-linear" :style="{ transform: 'rotateX(90deg) translate3d(-50px,0px,100px)' }">4</div>
<div class="face metal-linear" :style="{ transform: 'rotateY(180deg) translate3d(50px,-50px,50px)' }">5</div>
<div class="face metal-linear" :style="{ transform: 'rotateX(-90deg) translate3d(-50px,0px,0px)' }">6</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import { PanInput, useAxes } from "@egjs/vue-axes";
export default defineComponent({
name: "App",
setup() {
const area = ref(null);
const { connect, rotateX, rotateY } = useAxes(
{
rotateX: {
range: [0, 360],
circular: true,
startPos: 40,
},
rotateY: {
range: [0, 360],
circular: true,
startPos: 315,
},
},
{
deceleration: 0.0024,
});
onMounted(() => {
connect("rotateX rotateY", new PanInput(area));
});
return {
area,
rotateX,
rotateY,
};
},
});
</script>
<script>
import { onMount } from "svelte";
import { useAxes, PanInput } from "@egjs/svelte-axes";
let area;
const { connect, rotateX, rotateY } = useAxes(
{
rotateX: {
range: [0, 360],
circular: true,
startPos: 40,
},
rotateY: {
range: [0, 360],
circular: true,
startPos: 315,
},
},
{
deceleration: 0.0024,
});
onMount(() => {
connect("rotateX rotateY", new PanInput(area));
});
</script>
<div>
<p>You can rotate the cube using two axes.</p>
<div id="area" bind:this={area}>
<div id="container">
<div id="box" style="transform: rotateY({$rotateX}deg) rotateX({$rotateY}deg)">
<div class="face metal-linear" style="transform: rotateX(0deg) rotateY(0deg) translate3d(-50px,-50px,50px)">1</div>
<div class="face metal-linear" style="transform: rotateY(-90deg) translate3d(0px,-50px,100px)">2</div>
<div class="face metal-linear" style="transform: rotateY(90deg) translate3d(0px,-50px,0px)">3</div>
<div class="face metal-linear" style="transform: rotateX(90deg) translate3d(-50px,0px,100px)">4</div>
<div class="face metal-linear" style="transform: rotateY(180deg) translate3d(50px,-50px,50px)">5</div>
<div class="face metal-linear" style="transform: rotateX(-90deg) translate3d(-50px,0px,0px)">6</div>
</div>
</div>
</div>
</div>