Как изменить размеры куба в пикселях, оставив куб без изменений? - PullRequest
Новая
       43

Как изменить размеры куба в пикселях, оставив куб без изменений?

0 голосов
/ 03 июня 2019

Я пытаюсь изменить размеры куба на 300x250px, однако всякий раз, когда я делаю это, грани куба начинают перекрываться. Как бы я мог изменить значения перевода для достижения этого?

Я пытался изменить переводимые значения в CSS на проценты, но не смог заставить его работать.

Вот мой Codepen 

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container .cube-container {
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container .cube-container .cube {
transition: transform 2s ease-in;
transform-style: preserve-3d;
width: 150px;
height: 150px;
margin: 50px 0;
}

.box {
width: 100%;
height: 100%;
position: absolute;
color: white;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
}

.box.front {
background: #40b9dc;
transform: translateZ(75px);
}

.box.back {
background: #3dbadf;
transform: translateZ(-75px) rotateY(180deg);
}

.box.top {
 background: #5acaec;
 transform: rotateX(-90deg) translateY(-75px);
 transform-origin: top center;
}

.box.bottom {
background: #82daf4;
transform: rotateX(90deg) translateY(75px);
transform-origin: bottom center;
}

.box.left {
background: #a3e5f9;
transform: rotateY(270deg) translateX(-75px);
transform-origin: center left;
}

.box.right {
background: #67d6f7;
transform: rotateY(-270deg) translateX(75px);
transform-origin: top right;
}

Спасибо!

1 Ответ

0 голосов
/ 04 июня 2019

Я внес некоторые изменения в вашу ручку кода, надеясь, что это поможет: https://codepen.io/anon/pen/Mdxebo Я думаю, что главное, что я сделал, это то, что верхней и нижней панелям нужны разные значения высоты, если ваш куббудет неравномерным. 

.box.top {
  height: 84%;

  background: #5acaec;
  transform: rotateX(-90deg) translateY(-75px);
  transform-origin: top center;
}

.box.bottom {
  height: 84%;

  background: #82daf4;
  transform: rotateX(90deg) translateY(75px) translateZ(-48px);
  transform-origin: bottom center;
}
...