htmlcss3dcss-transforms

How do I calculate mathematically the transform 3D I to be applied on my CSS?


I have simulated a 3D object using CSS: a test

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>

All those degrees from rotate and top or left are all gotten by trial and error. This method took me too much time to get it right and I don't think that this is the best solution to simulate 3D objects using CSS.

  1. Is it possible to calculate mathematically so that I gain the exact numbers I need to use as the values in my transform?
  2. If it is indeed possible, what mathematics basics do I need? Could you give me an example of the calculation of one of the values in the above example?
  3. Is it good practice to use my method above to try and get a 3D object simulation? Should I use something else instead, for instance, gif? Can anyone suggest me in the right direction? Thanks in advance...

Solution

  • Yes it is possible to calculate the exact numbers, although it is tedious.

    To be able to do that you need to know at least Euclidian geometry in the space and in the plane and the rudiments of Linear Algebra like vector spaces and affine transformations.

    To be honest the more math you know the better you do in computer graphics. So there is no limit in how much you should know, just try to learn as much math as possible from all the fields you find connected to the problems you are facing departing from the topics listed above.

    About your particular method for doing 3d graphics using CSS I think it is not wrong, it is just hard to do it properly in that way and thus not very practical, at least not for a beginner in 3d graphics and animation. But still valuable for learning.