转自:http://www.w3cfuns.com/article-5595079-1-1.html
文章真正出处:http://www.alloyteam.com/2012/11/the-order-of-roate-with-rotatex-problem/
这篇是文章是转自腾讯的前端团队的,我本想直接转那篇,可是腾讯的这篇,有两个图显示不出来,难道是我打开的不对?
我起初对这个旋转也不是很理解,这篇文章里说的坐标轴也旋转,我刚开始也没能想象出来,后来我索性自己用两根筷子和一张废弃宣传纸制作了一个坐标系,然后按照这篇文章里的所写的旋转角度,去测试,立马豁然开朗,想象力很重要啊,rotate,rotateX,rotateY的旋转角度,正角度是顺时针,负角度是逆时针,rotateZ()我没试,但应该是同理,我数学学得不好,也比较笨,所以自己表了一个角度,供自己理解
原文如下:
<ignore_js_op style="word-wrap: break-word; font-family: verdana, 'Microsoft YaHei', Tahoma, sans-serif; line-height: 25px; -webkit-text-size-adjust: none; ">
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143612fytfl5tggjgscgfs.gif)
<ignore_js_op style="word-wrap: break-word; font-family: verdana, 'Microsoft YaHei', Tahoma, sans-serif; line-height: 25px; -webkit-text-size-adjust: none; ">
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143613pngx1hjpzdddd0lp.gif)
- @-webkit-keyframes raceFlag0{
- 0%{
- -webkit-transform:rotate(-720deg) rotateX(0deg) ;
- -webkit-transform-origin:100% 0%;
- }
- 100%{
- -webkit-transform:rotate(0deg) rotateX(-360deg) ;
- -webkit-transform-origin:100% 0%;
- }
- }
- @-webkit-keyframes raceFlag1{
- 0% {
- -webkit-transform: rotateX(0deg) rotate(-720deg);
- -webkit-transform-origin:100% 0%;
- }
- 100% {
- -webkit-transform: rotateX(-360deg) rotate(0deg);
- -webkit-transform-origin:100% 0%;
- }
- }
- -webkit-transform: rotateX(-135deg) rotate(-270deg);
- -webkit-transform-origin: 100% 0%;
- -webkit-transform: rotate(-270deg) rotateX(-135deg);
- -webkit-transform-origin: 100% 0%;
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143613d8kr91xrxqggp2x1.png)
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143613c3ta77e9c3fdidrt.png)
- -webkit-transform: perspective(200px) rotateX(45deg) rotate(90deg);
- -webkit-transform: perspective(200px) rotate(90deg) rotateX(45deg)
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143615fzaxfx8nwxootk8b.png)
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143616qmmz58r5e58bm5lz.png)
- -webkit-transform: perspective(200px) rotateX(45deg) rotateY(10deg);
- -webkit-transform: perspective(200px) rotateY(20deg) rotateX(45deg);
![](http://www.w3cfuns.com/data/attachment/forum/201211/09/143616kdxmdcw1mllxsr2c.png)