Что заставляет этот куб CSS «клип» при трехмерном вращении? ⇐ Html

[Anonymous]

У меня есть трехмерный куб, который я создал в HTML и CSS, и могу вращаться с помощью JavaScript. Это работает практически о том, как я ожидал, и я очень доволен этим, но есть одна проблема, которую я просто не понимаю: каждая сторона куба - это его собственный Div, и некоторые из них, кажется, «обрезают», когда вращаются определенным образом. Вот код, который показывает, как он работает - вы поворачиваете куб, используя клавиши со стрелками (он вращается вверх и вниз по оси X, используя вверх и вниз клавиши и слева и прямо вокруг оси Y, используя левые и правые клавиши - каждая клавиш продвигает его на 45 градусов в данном направлении. Нажимая ключ «R» сбрасывает его в оригинальную позицию): < /p>



Если javaScript и умножение матрицы слишком ошеломляет, вот куб вращается в положении обрезания в чистом CSS: Codepen - вращающийся куб, только CSS < /p>

Я снял первоначальный код, потому что, когда в положении в пост не повторно. Я думаю, что это может иметь какое -то отношение к форме вида? Однако два других фрагмента все еще встроены ниже. не быть достаточно быстрым, и некоторые из лиц не применяют свои преобразования достаточно быстро, но не имеет значения, насколько медленно оно идет, или даже если они останавливаются, проблема все еще очевидна. Безменный - я многое узнал, по крайней мере, о коде, хотя именно то, что делает преобразование матрицы, все еще за мной. Cube, Top и нижние лица только < /p>


//the cube and its six faces for easy refernce
var cube = document.querySelector(".cube");
var frontFace = document.querySelector(".cube-face-front");
var backFace = document.querySelector(".cube-face-back");
var leftFace = document.querySelector(".cube-face-left");
var rightFace = document.querySelector(".cube-face-right");
var topFace = document.querySelector(".cube-face-top");
var bottomFace = document.querySelector(".cube-face-bottom");

//this is the rotation matrix in which we can save the current state of the cube
var resetMatrix = new DOMMatrix();
var matrix = new DOMMatrix();

//takes a vector (rotation axis) and angle (rotation direction) as input and rotates the cube accordingly
function applyRotation(x, y, z, angle) {
var newMatrix = new DOMMatrix().rotateAxisAngle(x, y, z, angle).multiply(matrix);
cube.style.transform = newMatrix;
matrix = newMatrix;
}

//takes a keyboard arrow input and creates a vector (rotation axis) and angle (rotation direction) in response, then feeds that vector and angle to applyRotation
function keyboardTurn(event) {
switch (event.key) {
case "ArrowRight":
applyRotation(0, 1, 0, 45);
break;
case "ArrowLeft":
applyRotation(0, 1, 0, -45);
break;
case "ArrowUp":
applyRotation(1, 0, 0, 45);
break;
case "ArrowDown":
applyRotation(1, 0, 0, -45);
break;
case "r":
cube.style.transform = resetMatrix;
matrix = resetMatrix;
break;
default:
break;
}
}< /code>
body {
margin: 0;
box-sizing: border-box;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}

.perspective-container {
perspective: 500vmin;
width: 96vmin;
height: 96vmin;
}

.z-translation-container {
position: relative;
transform: translateZ(-48vmin);
width: 100%;
height: 100%;
transform-style: preserve-3d;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 2s;
}

.cube-face {
box-sizing: border-box;
position: absolute;
width: 96vmin;
height: 96vmin;
border: 0.5vmin solid black;
opacity: 0.55;
}

.cube-face-front {
transform: rotateY(0deg) translateZ(48vmin);
background-color: blue;
visibility: hidden;
}

.cube-face-back {
transform: rotateY(180deg) translateZ(48vmin);
background-color: orange;
visibility: hidden;
}

.cube-face-left {
transform: rotateY(-90deg) translateZ(48vmin);
background-color: yellow;
visibility: hidden;
}

.cube-face-right {
transform: rotateY(90deg) translateZ(48vmin);
background-color: purple;
visibility: hidden;
}

.cube-face-top {
transform: rotateX(90deg) translateZ(48vmin);
background-color: red;
}

.cube-face-bottom {
transform: rotateX(-90deg) translateZ(48vmin);
background-color: green;
}< /code>











< /code>
< /div>
< /div>
< /p>
, так что, возможно, проблема в том, что лица каким -то образом мешают друг другу, но я не могу представить, как. < /p>
Другое «решение» - это проблема, и у меня есть кубик, и от 46 В, и от 46 В, и от 46 В, и от 96 В, и от 96 В. Также проясните это - проблема в том, что для меня важно, чтобы куб был 96 Вмин с каждой стороны. Вот пример в действии: < /p>
Codepen-вращающийся куб, полуразмерный < /p>


//the cube and its six faces for easy refernce
var cube = document.querySelector(".cube");
var frontFace = document.querySelector(".cube-face-front");
var backFace = document.querySelector(".cube-face-back");
var leftFace = document.querySelector(".cube-face-left");
var rightFace = document.querySelector(".cube-face-right");
var topFace = document.querySelector(".cube-face-top");
var bottomFace = document.querySelector(".cube-face-bottom");

//this is the rotation matrix in which we can save the current state of the cube
var resetMatrix = new DOMMatrix();
var matrix = new DOMMatrix();

//takes a vector (rotation axis) and angle (rotation direction) as input and rotates the cube accordingly
function applyRotation(x, y, z, angle) {
var newMatrix = new DOMMatrix().rotateAxisAngle(x, y, z, angle).multiply(matrix);
cube.style.transform = newMatrix;
matrix = newMatrix;
}

//takes a keyboard arrow input and creates a vector (rotation axis) and angle (rotation direction) in response, then feeds that vector and angle to applyRotation
function keyboardTurn(event) {
switch (event.key) {
case "ArrowRight":
applyRotation(0, 1, 0, 45);
break;
case "ArrowLeft":
applyRotation(0, 1, 0, -45);
break;
case "ArrowUp":
applyRotation(1, 0, 0, 45);
break;
case "ArrowDown":
applyRotation(1, 0, 0, -45);
break;
case "r":
cube.style.transform = resetMatrix;
matrix = resetMatrix;
break;
default:
break;
}
}< /code>
body {
margin: 0;
box-sizing: border-box;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}

.perspective-container {
perspective: 500vmin;
width: 48vmin;
height: 48vmin;
}

.z-translation-container {
position: relative;
transform: translateZ(-48vmin);
width: 100%;
height: 100%;
transform-style: preserve-3d;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 2s;
}

.cube-face {
box-sizing: border-box;
position: absolute;
width: 48vmin;
height: 48vmin;
border: 0.5vmin solid black;
opacity: 0.55;
}

.cube-face-front {
transform: rotateY(0deg) translateZ(24vmin);
background-color: blue;
}

.cube-face-back {
transform: rotateY(180deg) translateZ(24vmin);
background-color: orange;
}

.cube-face-left {
transform: rotateY(-90deg) translateZ(24vmin);
background-color: yellow;
}

.cube-face-right {
transform: rotateY(90deg) translateZ(24vmin);
background-color: purple;
}

.cube-face-top {
transform: rotateX(90deg) translateZ(24vmin);
background-color: red;
}

.cube-face-bottom {
transform: rotateX(-90deg) translateZ(24vmin);
background-color: green;
}< /code>











< /code>
< /div>
< /div>
< /p>
У кого -нибудь есть идеи, что здесь может происходить? Я избивал голову против этого уже несколько дней и чувствую себя полностью озадаченным! Спасибо! больше ширины, но обычно появляется (но не всегда), когда ширина больше высоты. Просто еще одна точка данных.


Подробнее здесь: https://stackoverflow.com/questions/796 ... ensionally