Как мне математически рассчитать преобразование 3D I, которое будет применено к моему CSS? ⇐ Html

[Anonymous]

Я смоделировал 3D-объект с помощью CSS: тест

Код: Выделить всё

body {
background-color: black;
}

div#one,
div#two,
div#three {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
width: 100px;
height: 100px;
background-color: grey;
}

div#one {
transform: rotateX(70deg) rotateZ(45deg);
}

div#two {
background-color: rgb(150, 150, 150);
top: 119px;
left: -70px;
transform: rotateX(20deg) rotateY(45deg);
}

div#three {
top: 119px;
left: 70px;
transform: rotateX(-20deg) rotateY(45deg);
background-color: white;
}

Код: Выделить всё

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

• Можно ли провести математические вычисления, чтобы получить точные числа, которые мне нужно использовать в качестве значений в моем преобразовании?
• Если это действительно возможно, какие основы математики мне нужны? Не могли бы вы привести мне пример расчета одного из значений в приведенном выше примере?
• Хорошо ли использовать мой метод, описанный выше, чтобы попытаться получить симуляцию трехмерного объекта? Должен ли я вместо этого использовать что-то другое, например, gif?
  Может ли кто-нибудь подсказать мне правильное направление?
  Заранее спасибо...

Подробнее здесь: https://stackoverflow.com/questions/544 ... -on-my-css