前言最近练习的时候经常需要用到CSS3属性transform:rotate。如何旋转X轴、Y轴、Z轴？折腾了半天，终于在实践中搞定了。真知灼见，希望本文能对大家有所帮助。如有不妥欢迎指正，欢迎补充，欢迎交流关于rotate的基本使用。本文不再赘述。不知道这个属性的朋友可以先看看W3C关于这个属性的声明。前言这篇文章主要讲一下轮换这个属性的理解。从css3d到空间坐标轴，首先我们从人体的感知层面来理解这三个轴。Non-stopbackflips2.2Y-axisY轴旋转就像一个人在平坦的地面上转身（不说转圈，怕引起歧义）2.3Z轴是不是很像飞行员的训练程序？2.理想层面的理解经过上面的理解，就很容易理解了。我们先来看一下这三个轴组成的三维坐标图，然后把刚才的旋转代入到这个坐标中。容易理解吗？细心的读者会注意到，我添加的角度始终是正数。其实旋转的正负角度是有规律的。有文章指出当rotate为正值时，各轴顺时针旋转，否则按逆时针旋转，根据我的实验，其实是错误的，官方对此没有说明，这里我们可以使用左手螺旋法则（记得物理学中的右手螺旋法则，哈哈）伸出左手，大拇指指向正轴方向，四指指向就是旋转的正方向，但是一定要记住是左手！这里有两点需要强调一下：左手，正轴一定要用左手的拇指指向正轴的方向，这样我们才能得到旋转的正方向（旋转角度为正方向）3.C4D三维空间视图这里，使用C4D建模工具向读者展示了三维XYZ轴的旋转。我们将每个轴旋转60度，效果如图（X轴为红轴，Y轴为绿轴，Z轴为蓝轴）transform:rotateX(60deg)rotateY(60deg)旋转Z(60deg);
