css3动画 - 实现css3推倒动画

Question

想问下这个链接第五张 动效5的动画怎么实现，主要是X轴旋转后 上面边长还是和下面边长一样的 动图上面的边长变短了 效果好 求大神点拨一下

Answer 1

Just write it this way transform: perspective(400px) rotate3d(1,0,0,60deg);
transform-origin: bottom center;
This perspective should be written in front of other attributes, eh, I I don’t know why

Answer 2

Probably because you are still using a 2D perspective

Answer 3

It can also be achieved in 2D. It will be large near and small far away. You can rotate the X-axis and reduce the width of the top edge at the same time.