CSS教程之CCS3实例教程:rotate和rotateX
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.破洛洛文章简介：如许也就能够注释为何perspective为何要放在transform的第一名了。
我以为CCS3的transform中的学问很深，能够出很多口试题了，之前的文章谈到过perspective属性的地位成绩，我们明天看看rotate的按次，起首看看上面两个CSS3的keyframe动画：
两个动画的肇端形态和停止形态都是是一摸一样的（实在就是原始地位），分歧的只不外是rotate和rotateX的按次。可是动画效果却有惊人的不同。
CSS代码以下：
Css123456789101112131415161718192021@-webkit-keyframesraceFlag0{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-keyframesraceFlag1{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分离设置为：
Css12345-webkit-transform:rotateX(-135deg)rotate(-270deg);-webkit-transform-origin:100%0%;-webkit-transform:rotate(-270deg)rotateX(-135deg);-webkit-transform-origin:100%0%;了局是不不异的。以下图：
是否是-webkit-transform-origin设置的缘故原由呢？我们将该属性删除：
我们将成绩扭转的角度简化为45度和90度，为了让rotateX的效果分明现一些，我们增添perspective属性。两个CSS分离是：
Css12-webkit-transform:perspective(200px)rotateX(45deg)rotate(90deg);-webkit-transform:perspective(200px)rotate(90deg)rotateX(45deg)
如许我们就可以发明一些纪律了。就是rotate扭转的不是图象，（也不是孤单）而是坐标系。详细来讲，就是X轴也被扭转了。rotateX扭转的也是坐标系。
我们在图上增加坐标系人人就分明了。注重左面的图的坐标系顺时针扭转了90度。
我们再看一个个例子：
Css12-webkit-transform:perspective(200px)rotateX(45deg)rotateY(10deg);-webkit-transform:perspective(200px)rotateY(20deg)rotateX(45deg);
结论：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：以上结论是基于逻辑推理得来，自己没有看过这部分的扫瞄器源代码，请看过的同砚斧正。
</p>
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 滚动条)层属性--溢出(visible/hidden/scroll/auto) Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
页:
[1]