Код: Выделить всё
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
