css3動畫 - 實現css3推倒動畫

問題描述

想問下這個鏈接第五張 動效5的動畫怎么實現，主要是X軸旋轉后 上面邊長還是和下面邊長一樣的 動圖上面的邊長變短了 效果好 求大神點撥一下

問題解答

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

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

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