Как мне математически рассчитать преобразование 3D I, которое будет применено к моему CSS? - PullRequest
Новая
       31

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

0 голосов
/ 01 февраля 2019

Я смоделировал 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;
}
<div id = "one">
</div>

<div id = "two">
</div>

<div id = "three">
</div>

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

  1. Можно ли рассчитать математически, чтобы получитьточные числа, которые мне нужно использовать в качестве значений в моем преобразовании?
  2. Если это действительно возможно, какие основы математики мне нужны?Не могли бы вы привести пример вычисления одного из значений в приведенном выше примере?
  3. Является ли хорошей практикой использование моего метода, описанного выше, для получения моделирования трехмерного объекта?Должен ли я использовать что-то еще, например, GIF?Кто-нибудь может подсказать мне в правильном направлении?Заранее спасибо ...

1 Ответ

0 голосов
/ 02 февраля 2019

Да, можно рассчитать точные цифры, хотя это утомительно.

Чтобы это сделать, вам нужно знать хотя бы евклидову геометрию в пространстве и на плоскости и зачатки линейной алгебры, такие как векторные пространства и аффинные преобразования.

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

О вашем конкретномметод для создания 3D-графики с использованием CSS Я думаю, что это не так, просто сложно сделать это правильно таким образом и, следовательно, не очень практично, по крайней мере, для новичка в 3D-графике и анимации.Но все же ценный для обучения.

...