实现效果:(旋转的截图体现不出来,可以自己下个sublime 复制我给的代码自己试试)。
鼠标放在魔方上效果
实现代码:
原理很简单的!
1.就是先把6张图片重叠放在一起.
2.两张绕X轴旋转90°,分别位移1/2图片长度.
3.两张绕Y轴旋转90°,分别位移1/2图片长度.
4.两张绕Y轴旋转90°,分别位移1/2图片长度.
就构成了一个正方形。
然后用 transform-style: preserve-3d;
将子元素在3D空间中呈现。
再用 animation生成动画属性。(具体用法忘记了,大一没事弄着玩的)
代码的具体使用方法参考
W3school(专门学习Web技术的网站)