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.
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.