Why doesn't rotateX() work?

Question

css

I master transformations. Made a cube. Why can I rotate the block by 90 degrees, which is located on one of the faces of the cube?
codepen.io/anon/pen/XmovPV
There is a .tree block that I was supposed to use to represent a tree. But it transforms somehow strangely or completely disappears.

Answer 1

You need to look at the transform-origin property, which allows you to shift the rotation axis of the block. By default, it is in the center. Now you are rotating the blocks due to the fact that they were initially shifted along the axes, and by shifting the rotation axis to the corresponding edge you will not need to translate. I think this will also solve your problem.