css3动画 - 实现css3推倒动画

Question

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

Answer 1

這麼寫就好了transform: perspective(400px) rotate3d(1,0,0,60deg);
transform-origin: bottom center;
這個perspective要寫在其他屬性前面，額，我也不知道為什麼

Answer 2

估計是因為你用的還是2D的視角

Answer 3

用2D也可以實現啊，近大遠小，你旋轉X軸的同時縮小頂邊的寬度不就好了。