Rotate a Cube

You can rotate the cube using two axes.

1

2

3

4

5

6

JavaScript

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

React

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

Vue@2

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

Vue@3

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

Svelte

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