0

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

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

1 ответ 1

3

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

Так же, не стоит пытаться делать глубину при помощи 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.