仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1244|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CCS3实例教程:rotate和rotateX

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:49:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
目前我们的站就是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进行控制。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-17 19:04:31 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
爱飞 该用户已被删除
板凳
发表于 2015-1-26 11:53:12 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
地板
发表于 2015-2-4 19:49:16 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
小魔女 该用户已被删除
5#
发表于 2015-2-10 06:48:33 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
飘飘悠悠 该用户已被删除
6#
发表于 2015-3-1 03:19:26 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
兰色精灵 该用户已被删除
7#
发表于 2015-3-10 12:43:24 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
简单生活 该用户已被删除
8#
发表于 2015-3-17 07:25:38 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
柔情似水 该用户已被删除
9#
发表于 2015-3-24 03:00:00 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 13:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表