Why Does A Trapezoid Get Created With RotateY However No longer RotateX? (CSS)

I got here throughout this trick in CSS the place you’ll make a div take the form of a trapezoid via simply giving it 2 homes

turn out to be: point of view(numPX), after which turn out to be: rotateY(numDeg)

And this is smart to me. A rectangle is floating in entrance of you. You push it num PX into the digital area forward (Z-axis). After which while you rotate it clockwise, the left finish of the rectangle goes to transport additional away out of your point of view and the correct facet of the rectangle is transferring nearer for your point of view (which makes the correct facet longer and left facet shorter….and that finally ends up having a look like a trapezoid).

But if I do this with rotateX…….THIS DOES NOT HAPPEN. However why? Is not it the similar idea? The one distinction is that I am rotating the highest and backside facet of the rectangle (as an alternative of the left facet and proper facet).

I’m nonetheless getting the rotation impact the place the nearer it will get to 90 levels, the shorter the rectangle turns into…however the point of view impact isn’t going down.

View Reddit via SubzeroCola – View Supply