css3 - transform：旋转问题

Question

试实现下面的动效：

粉红色的线是辅助线。

问题看似简单，其实要覆盖全面还是不太容易的。
【某个CSS3属性】其实是不兼容IE的哦，所以用javascript来实现也是欢迎的答案～

Answer 1

The simplest solution is to do it through transform-style: preserve-3d;, so you only need to set up each surface and change the container.

http://jsfiddle.net/cLhofbh6/

Unfortunately, IE does not support this attribute.
The other solution will be more painful, as it requires rotation on three sides and ensuring that the rotation axes are consistent.