Как вращать 3D куб

Question

Помогите разобраться с кодом. Есть данный куб который на клик крутится, но прокрутка идёт не правильная и не могу понять почему.. Помогите отредактировать код так чтобы от центра шла прокрутка, а не под углом.

* {
  box-sizing: border-box;
  transition: all 2.2s;
  -webkit-transition: all 2.2s;
  color: #EEE;
  font-family: Monaco, MonoSpace;
}

body {
  margin: 0;
  background-color: #1d1f20;
}

.text {
  text-align: center;
  font-size: 40px;
}

small {
  font-size: 16px;
}

.text-2 {
  text-align: center;
  opacity: 0;
}

.cube-overlord {
  position: relative;
  margin: 200px auto;
  width: 100px;
}

.cube-overlord .display {
  display: none;
}

.cube-overlord .cube-master {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.cube-overlord .cube {
  cursor: pointer;
  position: absolute;
  width: 200px;
  height: 200px;
  -webkit-transform: rotateY(60deg) rotateX(15deg) rotateZ(30deg);
  -webkit-transform-style: preserve-3d;
}

.cube-overlord .cube .side {
  position: absolute;
  width: 200px;
  height: 200px;
}

.cube-overlord .cube .side:nth-child(1) {
  transform: translateZ(50px)translateY(-78px) translateX(12px)rotateY(356deg) skewY(349deg) skewX(5deg) scaleY(0.92) scale(1.1);
  background: linear-gradient(#999999, #000000);
}

.cube-overlord .cube .side:nth-child(2) {
  transform: rotateY(262deg)rotateX(356deg) translateZ(73px) translateY(-76px) translateX(-55px) skewY(1deg)skewX(0deg) scaleY(1);
  background: linear-gradient(#999999, #000000);
}

.cube-overlord .cube .side:nth-child(3) {
  transform: rotateX(268deg) rotateY(7deg) rotateZ(261deg) rotateY(1deg) translateZ(48px) translateX(-15px)translateY(-15px);
  background: linear-gradient(#999999, #000000);
}

.cube-overlord #cube-overlord-check:checked~.cube-master>.cube {
  transform: rotateY(-360deg) rotateX(40deg) rotateZ(0deg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CUBE</title>
</head>

<body>
  <div class="cube-overlord">
    <input type="checkbox" id="cube-overlord-check" class="display" />
    <label for="cube-overlord-check" class="cube-master">
            <div class="cube">
                <div class="side">1</div>
                <div class="side">4</div>
                <div class="side">6</div>
            </div>
        </label>
  </div>
</body>

</html>

Answer 1

Что бы куб вращался вокруг центра, нужно "собирать" его вокруг этого центра. Для наглядности вращаемый элемент сделан красным.

Так же, не стоит пытаться делать глубину при помощи skew(), достаточно правильно сместить(translate) и повернуть(rotate).

* {
  box-sizing: border-box;
  transition: all 2.2s;
  -webkit-transition: all 2.2s;
  color: #EEE;
  font-family: Monaco, MonoSpace;
}

body {
  margin: 0;
  background-color: #1d1f20;
}

.text {
  text-align: center;
  font-size: 40px;
}

small {
  font-size: 16px;
}

.text-2 {
  text-align: center;
  opacity: 0;
}

.cube-overlord {
  position: relative;
  margin: 200px auto;
  width: 100px;
}

.cube-overlord .display {
  display: none;
}

.cube-overlord .cube-master {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.cube-overlord .cube {
  cursor: pointer;
  position: absolute;
  width: 200px;
  height: 200px;
  transform: rotateX(-27deg) rotateY(45deg);
  transform-style: preserve-3d;
  
  background-color: rgb(255 0 0 / 40%);
}

.cube-overlord .cube .side {
  position: absolute;
  width: 200px;
  height: 200px;
}

.cube-overlord .cube .side:nth-child(1) {
  transform: translateX(100px) rotateY(-90deg);
  background: linear-gradient(#999999, #000000);
}

.cube-overlord .cube .side:nth-child(2) {
  transform: translateZ(-100px) rotateY(0deg);
  
  background: linear-gradient(#999999, #000000);
}

.cube-overlord .cube .side:nth-child(3) {
  transform: translateY(100px) rotateX(90deg);
  
  background: linear-gradient(#999999, #000000);
}

.cube-overlord #cube-overlord-check:checked~.cube-master>.cube {
  transform: rotateX(-27deg) rotateY(-135deg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CUBE</title>
</head>

<body>
  <div class="cube-overlord">
    <input type="checkbox" id="cube-overlord-check" class="display" />
    <label for="cube-overlord-check" class="cube-master">
            <div class="cube">
                <div class="side">1</div>
                <div class="side">4</div>
                <div class="side">6</div>
            </div>
        </label>
  </div>
</body>

</html>

БЛОГ НА HUSL

Как вращать 3D куб

Ответы (1 шт):