试实现下面的动效:
粉红色的线是辅助线。
问题看似简单,其实要覆盖全面还是不太容易的。 【某个CSS3属性】其实是不兼容IE的哦,所以用javascript来实现也是欢迎的答案~
欢迎选择我的课程,让我们一起见证您的进步~~
最簡單的方案是通過transform-style: preserve-3d;來做,這樣隻需要搭好各個麵,變換容器就可以了。
transform-style: preserve-3d;
http://jsfiddle.net/cLhofbh6/
可惜IE始終不支持這個屬性。 此外的方案會比較痛苦,需要針對三個麵做旋轉,還要保證轉軸一致。
最簡單的方案是通過
transform-style: preserve-3d;
來做,這樣隻需要搭好各個麵,變換容器就可以了。http://jsfiddle.net/cLhofbh6/
可惜IE始終不支持這個屬性。
此外的方案會比較痛苦,需要針對三個麵做旋轉,還要保證轉軸一致。