問(wèn)題描述

試實(shí)現(xiàn)下面的動(dòng)效：

粉紅色的線是輔助線。

問(wèn)題看似簡(jiǎn)單，其實(shí)要覆蓋全面還是不太容易的。【某個(gè)CSS3屬性】其實(shí)是不兼容IE的哦，所以用javascript來(lái)實(shí)現(xiàn)也是歡迎的答案～

問(wèn)題解答

最簡(jiǎn)單的方案是通過(guò)transform-style: preserve-3d;來(lái)做，這樣只需要搭好各個(gè)面，變換容器就可以了。

http://jsfiddle.net/cLhofbh6/

可惜IE始終不支持這個(gè)屬性。此外的方案會(huì)比較痛苦，需要針對(duì)三個(gè)面做旋轉(zhuǎn)，還要保證轉(zhuǎn)軸一致。