本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Css3.0_css2.0_html5
立即购买视频教程 css3学习笔记2D或3D转换
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-25 18:41:19
css3学习笔记2D或3D转换

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等,利用Transform和javascript可以制作一些简单的动画,可以为web应用带来些意想不到的效果。


目前浏览器并不是完全支持所有的Transform ,IE9、Firefox 和Opera 仅支持2D transforms ,相应的CSS定义为:-ms-transform 、-moz-transform 和-o-transform ,而Safari 和Chrome 都支持2D和3D transforms ,相应的CSS定义为:-webkit-transform 。


下面给出一个transform定义实例:


div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

-o-transform:rotate(7deg); /* Opera */

}

<font color="#c0504d">1.1 transform</font>

语法:transform: none|<i>transform-functions</i>;

说明:

Value


Description


none


定义这不需要转换


matrix(n,n,n,n,n,n)


使用有6个值的矩阵(matrix)来定义一个 2D 转换


matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)


使用有4*4的矩阵(matrix)来定义一个 3D 转换


translate(x,y)


定义一个2D 转换,x:水平位移,y:垂直位移,个人觉得和margin-left(left) 和margin-top(top)类似.


translate3d(x,y,z)


定义一个2D 转换,x:水平位移,y:垂直位移,z:Z方向的位移


translateX(x)


定义一个水平方向2D 转换


translateY(y)


定义一个垂直方向2D 转换


translateZ(z)


定义一个Z方向3D 转换


scale(x,y)


定义一个2D 拉伸, x:水平拉伸,y:垂直拉伸


scale3d(x,y,z)


义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸


scaleX(x)


定义一个水平方向拉伸


scaleY(y)


定义一个垂直方向拉伸


scaleZ(z)


定义一个Z方向的拉伸


rotate(angle)


定义一个 2D 旋转, angle :旋转角度(deg)


rotate3d(x,y,z,angle)


定义一个 3D 旋转,


rotateX(angle)


定义一个X轴3D旋转


rotateY(angle)


定义一个Y轴3D旋转


rotateZ(angle)


定义一个Z轴3D旋转


skew(x-angle,y-angle)


定义一个X轴和Y轴的2D 倾斜


skewX(angle)


定义一个X轴的2D 倾斜


skewY(angle)


定义一个Y轴的2D 倾斜


perspective(n)


定义一个3D转换效果和透视图


1.2 transform-origin


定义元素旋转的位置,配合transform使用。


语法:transform-origin: x-axis y-axis z-axis;


说明:


Property Value


Description


x-axis


定义X轴的转换位置. 可能的值有:


left

center

right

length

%

y-axis


定义Y轴的转换位置. 可能的值有:


top

center

bottom

length

%

z-axis


定义Z轴的转换位置. 可能的值有:


length

1.3 transform-style


对于支持3D转换的浏览器,指定元素内的子元素是否进入其3D环境中。


语法:transform-style: flat|preserve-3d;


说明:


Property Value


Description


flat


子元素不参与3D转换


preserve-3d


子元素将显示在3D环境中


实例:


<style type="text/css">

.panal{

    width:500px; border: 1px solid blue; height:200px;

}

.panal div{

    border: 1px solid #6600FF ;width:120px; height:60px; background-color:#CC9900;

}

.tr{

transform: translate(80px, 60px) scale(.75, .75) rotate(40deg);

transform-origin: 60% 100%;

-ms-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);

-ms-transform-origin: 60% 100%;

-moz-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);

-moz-transform-origin: 60% 100%;

-webkit-transform: translate(80px, 60px) scale(.75, .75) rotate(40deg);

-webkit-transform-origin: 60% 100%;

-o-transform:  translate(80px, 60px) scale(.75, .75) rotate(40deg);

-o-transform-origin: 60% 100%;

}

</style>

<pre class="brush: xml; auto-links: true; collapse: false; first-line: 1; gutter: false; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: false;"><div class="panal">

<div></div>

<div class="tr"></div>

</div></pre>

在我之前的一篇博文利用Transform结合javascript做的动态时钟,下面再给展现一个带有动态效果的DEMO:


有兴趣的同学去我这篇博文中查看相关源码。


下面展现一个我从webkit官网上找到的一个Transform DEMO:



在下一篇博文中,我将讲解CSS3中的动画(animations),结合它transform,能创造出更炫的效果。


复制链接 网友评论 收藏本文 关闭此页
上一条: css3学习笔记Transform  下一条: css3学习笔记文本特效
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3