javascript – How do I rotate a cube in the center?

Question:

var cube = document.querySelector('.cube');

var tmpCenter;
var currentRotateY = 0;
var dx;

window.addEventListener('mousedown', cubeMouseDownHandler);

function cubeMouseDownHandler(e) {
  e.preventDefault();
  tmpCenter = e.x;

  window.addEventListener('mousemove', bodyMouseMoveHandler);
  window.addEventListener('mouseup', bodyMouseUpHandler);
}

function bodyMouseMoveHandler(e) {
  dx = tmpCenter - e.x;
  currentRotateY += dx;
  tmpCenter = e.x;

  cube.style.transform = `rotateY(${currentRotateY}deg)`;
}

function bodyMouseUpHandler(e) {
  window.removeEventListener('mousemove', bodyMouseMoveHandler);
  window.removeEventListener('mouseup', bodyMouseUpHandler);
}
body {
  margin: 0;
}

.app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
}

.cube {
  width: 10rem;
  height: 10rem;
  display: grid;
  transform-style: preserve-3d;
}

.side {
  width: 100%;
  height: 100%;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.side_1 {
  background-color: tomato;
}

.side_2 {
  background-color: lightblue;
  transform: rotateY(-90deg);
  transform-origin: right;
}

.side_3 {
  background-color: pink;
  transform: rotateY(90deg);
  transform-origin: left;
}

.side_4 {
  background-color: lightgreen;
  transform: translateZ(-160px);
  transform-origin: center;
}

.center {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: black;
}
<div class="app">
  <div class="cube">
    <div class="side side_1"></div>
    <div class="side side_2"></div>
    <div class="side side_3"></div>
    <div class="side side_4"></div>
  </div>

  <div class="center"></div>
</div>

I tried to somehow comprehend this, I came to the conclusion that from the center of the cube (calculated at the beginning of the code), as it rotates, it is necessary to subtract the coordinate of its left side … this seems to be the required offset … only the trouble is, центр минус левая сторона – a number that, as the left side approaches the center, goes like this: 80 ------- > 0 , and I need it like this: 0 ------- > 80 (I don't know how it's called =))

var cube = document.querySelector('.cube');

var tmpCenter;
var currentRotateY = 0;
var dx;

var cubeBox, cubeCenter;

init();

window.addEventListener('mousedown', cubeMouseDownHandler);

function cubeMouseDownHandler(e) {
  e.preventDefault();
  tmpCenter = e.x;

  window.addEventListener('mousemove', bodyMouseMoveHandler);
  window.addEventListener('mouseup', bodyMouseUpHandler);
}

function bodyMouseMoveHandler(e) {
  cubeBox = cube.getBoundingClientRect();

  dx = tmpCenter - e.x;
  currentRotateY += dx;
  tmpCenter = e.x;

  console.log(cubeCenter - cubeBox.left)
  cube.style.transform = `translateX(${0}px) rotateY(${currentRotateY}deg)`;
}

function bodyMouseUpHandler(e) {
  window.removeEventListener('mousemove', bodyMouseMoveHandler);
  window.removeEventListener('mouseup', bodyMouseUpHandler);
}

function init() {
  cubeBox = cube.getBoundingClientRect();
  cubeCenter = cubeBox.left + cubeBox.width / 2;
}
window.onresize = () => init();
body {
  margin: 0;
}

.app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
}

.cube {
  width: 10rem;
  height: 10rem;
  display: grid;
  transform-style: preserve-3d;
}

.side {
  width: 100%;
  height: 100%;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.side_1 {
  background-color: tomato;
}

.side_2 {
  background-color: lightblue;
  transform: rotateY(-90deg);
  transform-origin: right;
}

.side_3 {
  background-color: pink;
  transform: rotateY(90deg);
  transform-origin: left;
}

.side_4 {
  background-color: lightgreen;
  transform: translateZ(-160px);
  transform-origin: center;
}

.center {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: black;
}
<div class="app">
  <div class="cube">
    <div class="side side_1"></div>
    <div class="side side_2"></div>
    <div class="side side_3"></div>
    <div class="side side_4"></div>
  </div>

  <div class="center"></div>
</div>

How to do it? Or what I came up with wrong at all?

Answer:

Can you position the edges around the center with transforms?

var cube = document.querySelector('.cube');
var tmpCenter;
var currentRotateY = 0;
var dx;

addEventListener('mousedown', cubeMouseDownHandler);

function cubeMouseDownHandler(e) {
  e.preventDefault();
  tmpCenter = e.x;
  addEventListener('mousemove', bodyMouseMoveHandler);
  addEventListener('mouseup', bodyMouseUpHandler);
}

function bodyMouseMoveHandler(e) {
  currentRotateY -= tmpCenter - e.x;
  cube.style.transform = `rotateY(${currentRotateY}deg)`;
  tmpCenter = e.x;
}

function bodyMouseUpHandler(e) {
  removeEventListener('mousemove', bodyMouseMoveHandler);
  removeEventListener('mouseup', bodyMouseUpHandler);
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
  margin: 0;
}
.cube {
  width: 10rem;
  height: 10rem;
  display: grid;
  transform-style: preserve-3d;
}
.side {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.side_1 {
  background-color: tomato;
  transform: translateZ(80px);
}
.side_2 {
  background-color: lightblue;
  transform: translateZ(80px)rotateY(-90deg);
  transform-origin: right;
}
.side_3 {
  background-color: pink;
  transform: translateZ(80px)rotateY(90deg);
  transform-origin: left;
}
.side_4 {
  background-color: lightgreen;
  transform: translateZ(-80px);
}
<div class="cube">
  <div class="side side_1"></div>
  <div class="side side_2"></div>
  <div class="side side_3"></div>
  <div class="side side_4"></div>
</div>
Post Views: 1
Scroll to Top