CSS3的rotate与rotateX的顺序研究

转自: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()我没试,但应该是同理,我数学学得不好,也比较笨,所以自己表了一个角度,供自己理解

 

 

原文如下:

 我觉得CCS3的transform中的学问很深,可以出不少面试题了,我们今天看看rotate的顺序,首先看看下面两个CSS3的keyframe动画:

 

      两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是rotate和rotateX的顺序。但是动画效果却有惊人的差别。

<ignore_js_op style="word-wrap: break-word; font-family: verdana, 'Microsoft YaHei', Tahoma, sans-serif; line-height: 25px; -webkit-text-size-adjust: none; ">

<ignore_js_op style="word-wrap: break-word; font-family: verdana, 'Microsoft YaHei', Tahoma, sans-serif; line-height: 25px; -webkit-text-size-adjust: none; ">

 

CSS代码如下:
  1. @-webkit-keyframes raceFlag0{
  2.     0%{
  3.         -webkit-transform:rotate(-720deg) rotateX(0deg) ;
  4.         -webkit-transform-origin:100% 0%;
  5.     }
  6.     100%{
  7.         -webkit-transform:rotate(0deg) rotateX(-360deg) ;
  8.         -webkit-transform-origin:100% 0%;
  9.     }
  10. }
  11. @-webkit-keyframes raceFlag1{
  12.     0% {
  13.         -webkit-transform: rotateX(0deg) rotate(-720deg);
  14.         -webkit-transform-origin:100% 0%;
  15.     }
  16.     100% {
  17.         -webkit-transform: rotateX(-360deg) rotate(0deg);
  18.         -webkit-transform-origin:100% 0%;
  19.     }
  20. }
复制代码

 

      我看了mozilla的网站介绍,里面没有提到关于顺序的问题。于是我做了以下实验。

 

      将两个同样的元素的style分别设置为:
  1. -webkit-transform: rotateX(-135deg) rotate(-270deg);
  2. -webkit-transform-origin: 100% 0%;
  3. -webkit-transform: rotate(-270deg) rotateX(-135deg);
  4. -webkit-transform-origin: 100% 0%;
复制代码

 

      结果是不相同的。如下图:
<ignore_js_op style="word-wrap: break-word; ">
      是不是-webkit-transform-origin设置的原因呢?我们将该属性删除:
<ignore_js_op style="word-wrap: break-word; ">
      我们将问题旋转的角度简化为45度和90度,为了让rotateX的效果明显现一些,我们增加perspective属性。两个CSS分别是:
  1. -webkit-transform: perspective(200px) rotateX(45deg) rotate(90deg);
  2. -webkit-transform: perspective(200px) rotate(90deg) rotateX(45deg)
复制代码

 

<ignore_js_op style="word-wrap: break-word; ">
      这样我们就能发现一些规律了。就是rotate旋转的不是图像,(也不是寂寞)而是坐标系。具体来说,就是X轴也被旋转了。rotateX旋转的也是坐标系。

 

      我们在图上添加坐标系大家就明白了。注意右面的图的坐标系顺时针旋转了90度。
<ignore_js_op style="word-wrap: break-word; ">

 

      我们再看一个个例子:
  1. -webkit-transform: perspective(200px) rotateX(45deg) rotateY(10deg);
  2. -webkit-transform: perspective(200px) rotateY(20deg) rotateX(45deg);
复制代码

 

<ignore_js_op style="word-wrap: break-word; ">
      结论:rotate、rotateX、rotateY、rotateZ都是旋转坐标系。rotateX时,Y轴和Z轴的位置会变。rotateY时,X轴和Z轴的位置会变。rotate和rotateZ时,X轴和Y轴的位置会变。
我们使用rotate时要注意顺序,特别是动画的时候。

 

      进一步的结论:用过canvas中transform的同学可能会知道,在canvas中进行transform时,变形的对象是canvas本身。看来在CSS3的transform中也是一样的道理。比如我想将图片旋转90度,浏览器的逻辑是,将页面旋转-90度,然后渲染图片,之后再将页面旋转90度。这样就实现了旋转图片的效果。

 

      因此在CSS3的tranform属性中,perspective、rotate、translate等属性并不是代表对象的最终状态,而是浏览器渲染对象的“指令队列”。浏览器会依次执行这些“指令”。

 

      这样也就可以解释为什么perspective为什么要放在transform的第一位了。

 

PS:以上结论是基于逻辑推理得来,本人没有看过这部分的浏览器源代码,请看过的同学指正。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值