ie10 3D变换
ie10中新增特性——3d变换
先给大家看一个demo:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm
通过这个demo大家可以很直观的查看关于3d变换的各个属性变化。
这里面罗列了3D变换的属性(函数)
这里简单说一下各个属性(函数)的作用:
2d平移:transform:translate (x轴,y轴)
3d平移:transform:translate3d(x轴,y轴,z轴)
translate3d函数通过矢量 [tx,ty,tz] 来指定 3-D 平移,其中 tx、ty 和 tz 分别是第一、第二和第三个平移值参数。
例:
transform:translate3d(30px,30px,30px);
单独改变某一个轴向上的值:
transform: perspective( 500px ) translateZ( -60px ); |
3d缩放:scale3d(<number>, <number>, <number>)
scale3d函数通过由三个参数表示的 [sx,sy,sz] 缩放矢量来指定 3-D 缩放操作。
例:
transform: scale3d(0.5, -0.5, 1.5);
单独缩放某一个轴向:
scaleZ(<number>);
3d旋转:rotate3d (<number>, <number>, <number>, <angle>)
这个稍微有点复杂,rotae3d的前三个参数代表元素的旋转方向,取值范围为0-1之间的任何数,第四个参数angle,代表的是每个轴向旋转的角度。比如:
transform: rotate3d(0.3, 0.5, 1, 45deg);
这行代码的意思就是沿x轴旋转45deg的30%,也就是x轴旋转13.5度,y轴旋转45deg的50%,也就是y轴旋转22.5度,z轴旋转45deg的100%,也就是z轴选择45度。
出来的效果就是:
当然也可以对某一个轴向单独进行旋转,在单轴旋转的时候,取值范围只有0和1,小于1大于0的任意数都会认为是1.
对某一个轴向进行旋转还可以用这样的写法:
transform: perspective(500px) rotateX(45deg);
2d倾斜:skew(<angle>, <angle>);
里面的参数就是需要倾斜的角度,需要注意的就是倾斜是以2d坐标的方式倾斜,比如:
transform: perspective(500px) skew(21deg, -20deg);
这行代码表示的就是先以2d坐标的x轴倾斜29度,然后以2d坐标的y轴旋转10度。
出来的效果:
除了以上的属性还有:
transform-origin:length length length;
属性为一个元素创建变换的初始,第一个代表的是x轴的初始位置,第二个代表的是y轴的初始位置,第三个代表的是z轴的初始位置(必须是长度值).
默认的是transform-origin:50% 50% 0px;(元素中间).一般只设前两个参数。
perspective:number;
以像素为单位,表示的是视野的深度,数值越大,离得越远,这个属性跟transform:translateZ变换效果很像,区别就是transform:translateZ会受到transform的其他属性的影响,比如rotateY后,再执行z轴平移就会以旋转后的坐标平移。
重要提示:W3C 规范定义了此属性的 preserve-3d 关键字值,它表示不执行平展操作。平展是啥?平展就是内部构建的3d元素将以平面的方式展示。而目前,Internet Explorer 10 不支持preserve-3d 关键字。这是挺坑爹的,但也没办法,作为变通方式,除了子元素的正常变换,你可以手动将父元素的变换应用到每个子元素。
例:
transform: perspective(50px) rotateY(11deg);
perspective-origin 属性
创建透视属性的初始。它实际上设置 x- 和 y-位置,在该位置观看者好像在观看该元素的子元素。该属性被设置为一或两个长度值,用法跟平移初始一样。、
默认的是perspective -origin:50% 50% 0px;(元素中间).一般只设前两个参数。
backface-visibility 属性
属性指示当观看者面向已变换元素的背面(反面)时,其背面是否可见。对于未变换的元素,该元素的正面面向观看者。
它的属性值为visible表示反面可见,和hidden 表示反面不可见。
例:backface-visibility: visible;
下面通过一个例子来了解属性的使用:
这是最后要实现的效果:
http://www.ibokanfamily.com/win8/3d.html
思路就是旋转它的x轴坐标,然后通过一个动画平移它的y轴坐标值:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3d变换</title> <style> body{ background:url(http://www.ibokanfamily.com/win8/2.jpg);} @keyframes translateY{ from {transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(600px) translateZ(10px);} to {transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(50px) translateZ(10px);} } .translateY{ color:white; font-size:16px; overflow:hidden; backface-visibility: visible; width:300px; line-height:50px; margin:0 auto; transform-origin: 50% 50%; transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(600px) translateZ(10px); animation:translateY 30s linear infinite; } </style> </head> <body> <div class="translateY"> 北京博看文思科技有限责任公司3G研发中心成立于2005年7月,是国内最具创造性、最具技术实力的3G跨平台(IOS、Android、Windows Mobile、Linux、Web OS)智能移动研发中心。北京博看文思科技有限责任公司3G研发中心技术实力雄厚,拥有自主知识产权的游戏物理引擎、3D引擎和3G跨平台开发框架。截止目前,北京博看文思科技有限责任公司3G研发中心已与众多世界500强跨国企业合作,提供3G开发服务,在国际3G开发市场崭露头角,赢得广泛赞誉。 </div> </body> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?