转自: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代码如下:
- @-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%;
- }
- }
我看了mozilla的网站介绍,里面没有提到关于顺序的问题。于是我做了以下实验。
将两个同样的元素的style分别设置为:
- -webkit-transform: rotateX(-135deg) rotate(-270deg);
- -webkit-transform-origin: 100% 0%;
- -webkit-transform: rotate(-270deg) rotateX(-135deg);
- -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分别是:
- -webkit-transform: perspective(200px) rotateX(45deg) rotate(90deg);
- -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; ">
我们再看一个个例子:
- -webkit-transform: perspective(200px) rotateX(45deg) rotateY(10deg);
- -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:以上结论是基于逻辑推理得来,本人没有看过这部分的浏览器源代码,请看过的同学指正。
相关推荐
css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码。
包含:CSS权威指南、css彻底设计研究、HTML5和CSS3实战、HTML5与CSS3设计模式
2个css3-rotate圆环叠加旋转特效,两个旋转特效如示例截图所示,一个为平面型,另一个是立体效果的,圆环叠加在一起快速的旋转,两个效果从制作基础上来说,有很多相似之处,请下载源码参考吧。
css3参考手册,走过路过不要错过哈。css3参考手册 css3参考手册
iecss3.htc css3圆角支持文件
CSS设计彻底研究 CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码CSS 彻底研究 实例源码
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
CSS3skew倾斜、rotate旋转动画.doc
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
第1章 (X)HTML与CSS核心基础 1.1 HTML与XHTML 1.1.1 追根溯源 1.1.2 DOCTYPE(文档类型)的含义与选择 1.1.3 XHTML与HTML的重要区别 1.2 (X)HTML与CSS 1.2.1 CSS标准简介 ...
《图解CSS3核心技术与案例实战》PDF,配套源代码。《图解CSS3核心技术与案例实战》将CSS3特性按模块功能分类,通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。能帮助从事CSS3开发的前端工程师 系统掌握CSS3...
css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码。
一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code,如果浏览器不支持css3,那么其显示效果就不会出现。 css3和css,在编写code的时候,...
HTML5与CSS3基础教程(中文第8版) 本书自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...
内容全面,不仅讲解了CSS3的方方面面,而且还在一些关键的功能点上与CSS2.x进行了充分的比较;实战性强,几乎所有知识点都配有案例,全书配有实战案例百余个。《CSS 3实战》不仅能满足读者系统学习理论知识的需求,...
想好好学习css的朋友请下载!书中对css中的难点、重点进行了详细的研究,对有一定css基础的朋友会有一个很大的提高,同时对初学者来说更是深入浅出!
354个CSS3特效源码,涵盖几乎所有网页常见CSS3特效,支持PC端和移动端。