本文介绍了如何使用CSS实现一个3D魔方效果，通过叠加图片并应用旋转和位移，结合transform-style: preserve-3d与CSS动画，创建出一个正方形的3D视觉效果。读者可以通过亲自尝试代码来体验这一效果。
实现效果：（旋转的截图体现不出来，可以自己下个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技术的网站)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
