前言
最近在练习的时候经常须要应用 CSS3 属性 transform：rotate，到底 X 轴，Y 轴，Z 轴 如何旋转的，纠结了半天，终于还是实际得真知，写下这篇文章心愿能够帮忙大家，如果有说错的中央欢送斧正，欢送补充，欢送交换
对于 rotate 的根本应用本文不多赘述，不意识这个属性的敌人能够先看 W3C 对该属性的介绍
本文次要谈谈对该属性旋转的了解
参考从 css 3d 说到空间坐标轴
首先咱们从 人体的角度 理性层面来了解这三个轴
1. 理性层面了解
1.1 X 轴
X 轴的旋转好比人在高山不停地 后空翻
2.2 Y 轴
Y 轴的旋转好比人在高山不停地 转身（不说转圈是因为怕引起歧义）
2.3 Z 轴
是不是很像飞行员的训练项目？
2. 现实层面了解
有了下面的意识之后接下来就好了解了，咱们先来看由这三条轴形成的三维坐标图
咱们再来把方才的旋转代入到这个坐标中，是不是很好了解了。认真的读者会留神到我减少的角度始终是 负数 ，其实旋转的正角度和负角度是有规定的，看到一些文章指出，当 rotate 的值为正时，各轴按顺时针旋转，反之按逆时针旋转，依据我的试验，其实是谬误的，因为官网没有对此相应的形容，这里咱们能够应用 左手螺旋法令（还记得物理学过的右手螺旋法令吗，哈哈）
伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！
这里要强调两点：左手 ， 正轴
肯定要是应用 左手 的大拇指指向 正轴的方向 ，咱们才能够失去旋转的 正向（旋转角度为正的方向）
3. C4D 三维空间视图
这里用 C4D 建模工具为读者展现三维 XYZ 轴的旋转
咱们别离在各轴旋转正的 60 度，成果如图所示（X轴是 红轴，Y轴是绿轴，Z轴是蓝轴）
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);