本文深入探讨了前端Web中JavaScript的3D空间转换，包括perspective透视和rotate旋转，并强调了transform-style: preserve-3d的作用。接着，重点介绍了动画的创建与应用，详细阐述了如何定义关键帧以及使用animation属性来调用和控制动画，如动画时长、循环次数和执行方式等。
一、空间转换3D
（1）perspective透视
透视是在空间转换时，给元素添加近大远小、近实远虚的效果。
语法：perspective：Xpx； X取值为800-1200px
注意：必须给父元素添加！！！
有了透视，元素在空间的旋转效果会比较明显
还有一个属性：transform-style:perserve-3d
如果子盒子想在父盒子里呈现3D效果需要在父盒子添加这个属性
（2）rotate旋转
rotate在3D空间有3个方向旋转，X Y Z
语法：
rotateX rotateY rotateZ
注意：X Y Z必须为大写！
进行空间旋转的时候，元素自身的轴会随着旋转而发生变化！！！！！
左手定则
就是初中学习的螺旋定则：手指卷的方向是旋转的方向，为正方向，取值为正，反之，为负。拇指所指方向为
最低0.47元/天 解锁文章
1682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
