Использование трансформации для создания чистого куба - PullRequest
Новая
       8

Использование трансформации для создания чистого куба

2 голосов
/ 08 марта 2019

Так что есть много постов, связанных с этим, но я не могу точно определить, где я ошибаюсь в своих стилях, поэтому извиняюсь, если некоторые из вас видят это как переплет предыдущих вопросов.

Эта проблема очень проста: я просто пытаюсь сделать случайный бросок костей.Js работает как положено, все работает нормально.Проблема в том, что куб выглядит довольно неловко, и я не совсем уверен, почему.Я обычно довольно хорошо разбираюсь в css, но я не очень много работаю с 3d-трансформациями, так что мне не хватает интуиции.Если вы запустите фрагмент, вы увидите, что не все стороны являются гладкими, когда куб вращается, некоторые стороны выглядят прогнутыми, и я не уверен почему (особенно стороны 1 и 2).Полный код приведен в следующем фрагменте кода: 

const rollBtn = document.getElementById('roll');
const sides = ['one', 'two', 'three', 'four', 'five', 'six'];
const output = document.getElementById('dice_output');
let currentClass = '';

const rollDice = () => {
  let randomSide = sides[Math.floor(Math.random() * (6) + 1)];
  let currentSide = document.getElementById(randomSide);
  let generatedSide = `show-${randomSide}`;
  if (currentClass) {
    output.classList.remove(currentClass);
  }
  output.classList.add(generatedSide);
  currentClass = generatedSide;
}

rollBtn.addEventListener('click', rollDice);
* {
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 80px;
  margin: 5% auto;
  text-align: center;
}

.stage {
  width: 80px;
  height: 80px;
  perspective: 300px;
}

.btn-container {
  width: 80px;
  margin: 2% auto;
  text-align: center;
}

.the-big-z {
  z-index: 1000;
}

.the-die {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transition: all ease .5s;
  display: block;
  margin-bottom: 5%;
}

.die-side {
  width: 80px;
  height: 80px;
  color: #fff;
  background-color: #000;
  position: absolute;
  text-align: center;
  padding-top: 20%;
  border: solid 3px teal;
}

#one { 
  transform: rotateY(  0deg) translateZ(0px); 
}
#two { 
  transform: rotateY( 90deg) translateZ(0px); 
}
#three { 
  transform: rotateY(180deg) translateZ(40px); 
}
#four { 
  transform: rotateY(-90deg) translateZ(40px); 
}
#five { 
  transform: rotateX( 90deg) translateZ(40px); 
}
#six { 
  transform: rotateX(-90deg) translateZ(40px); 
}

#dice_output.show-one { 
  transform: translateZ(-40px) 
  rotateY(   0deg); 
}

#dice_output.show-two { 
  transform: translateZ(-40px) 
  rotateY( -90deg); 
}

#dice_output.show-three { 
  transform: translateZ(-40px) 
  rotateY(-180deg); 
}

#dice_output.show-four { 
  transform: translateZ(-40px) 
  rotateY(  90deg); 
}

#dice_output.show-five { 
  transform: translateZ(-40px) 
  rotateX( -90deg); 
}

#dice_output.show-six { 
  transform: translateZ(-40px) 
  rotateX(  90deg); 
}
<html>
  <head></head>
  <body>
    <div class="container clearfix">
      <div class="stage">
        <div id="dice_output" class="the-die">
          <div id="one" class="die-side">1</div>
          <div id="two" class="die-side" >2</div>
          <div id="three" class="die-side" >3</div>
          <div id="four" class="die-side" >4</div>
          <div id="five" class="die-side" >5</div>
          <div id="six" class="die-side" >6</div>
        </div>
      </div>
    </div>
    <div class="btn-container">
      <button id="roll">roll the dice</button>
    </div>
  </body>
</html>

1 Ответ

2 голосов
/ 08 марта 2019

Вам также нужно перевести #one и #two в 40px

const rollBtn = document.getElementById('roll');
const sides = ['one', 'two', 'three', 'four', 'five', 'six'];
const output = document.getElementById('dice_output');
let currentClass = '';

const rollDice = () => {
  let randomSide = sides[Math.floor(Math.random() * (6) + 1)];
  let currentSide = document.getElementById(randomSide);
  let generatedSide = `show-${randomSide}`;
  if (currentClass) {
    output.classList.remove(currentClass);
  }
  output.classList.add(generatedSide);
  currentClass = generatedSide;
  
}

rollBtn.addEventListener('click', rollDice);
* {
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 80px;
  margin: 5% auto;
  text-align: center;
}

.stage {
  width: 80px;
  height: 80px;
  perspective: 300px;
}

.btn-container {
  width: 80px;
  margin: 2% auto;
  text-align: center;
}

.the-big-z {
  z-index: 1000;
}

.the-die {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transition: all ease .5s;
  display: block;
  margin-bottom: 5%;
}

.die-side {
  width: 80px;
  height: 80px;
  color: #fff;
  background-color: #000;
  position: absolute;
  text-align: center;
  padding-top: 20%;
  border: solid 3px teal;
}

#one { 
  transform: rotateY(  0deg) translateZ(40px); // Here
}
#two { 
  transform: rotateY( 90deg) translateZ(40px); // And here
}
#three { 
  transform: rotateY(180deg) translateZ(40px); 
}
#four { 
  transform: rotateY(-90deg) translateZ(40px); 
}
#five { 
  transform: rotateX( 90deg) translateZ(40px); 
}
#six { 
  transform: rotateX(-90deg) translateZ(40px); 
}

#dice_output.show-one { 
  transform: translateZ(-40px) 
  rotateY(   0deg); 
}

#dice_output.show-two { 
  transform: translateZ(-40px) 
  rotateY( -90deg); 
}

#dice_output.show-three { 
  transform: translateZ(-40px) 
  rotateY(-180deg); 
}

#dice_output.show-four { 
  transform: translateZ(-40px) 
  rotateY(  90deg); 
}

#dice_output.show-five { 
  transform: translateZ(-40px) 
  rotateX( -90deg); 
}

#dice_output.show-six { 
  transform: translateZ(-40px) 
  rotateX(  90deg); 
}
<html>
  <head></head>
  <body>
    <div class="container clearfix">
      <div class="stage">
        <div id="dice_output" class="the-die">
          <div id="one" class="die-side">1</div>
          <div id="two" class="die-side" >2</div>
          <div id="three" class="die-side" >3</div>
          <div id="four" class="die-side" >4</div>
          <div id="five" class="die-side" >5</div>
          <div id="six" class="die-side" >6</div>
        </div>
      </div>
    </div>
    <div class="btn-container">
      <button id="roll">roll the dice</button>
    </div>
  </body>
</html>
...