新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

5.11日音讯,IE10下CSS33Dtransfrom变换

发布日期:2013-05-11文章来源:首创网络浏览次数:701次
    5.11日音讯,IE10下CSS33Dtransfrom变换。令开发者关注和热议的还是IE10能否更好地支持HTML5?因为早在IE10之前就有人这样评论IE浏览器:IE浏览器是Web新技术发展道路上的绊脚石。IE6的辉煌时代已经结束,IE7也是这样,即便是IE8,也......
    本文关键字:5.11日,音讯,IE10,下,CSS33Dtransfrom,变换,
  5.11日音讯,IE10下CSS33Dtransfrom变换。令开发者关注和热议的还是IE10能否更好地支持HTML5?因为早在IE10之前就有人这样评论IE浏览器:IE浏览器是Web新技术发展道路上的绊脚石。IE6的辉煌时代已经结束,IE7也是这样,即便是IE8,也仍然不能称为一款“现代浏览器”。而IE9对HTML5的支持尚不完全,比如不支持WebSockets和WebWorkers。要知道这两项可是对HTML5来说是非常重要的新特性。
  笔者个人认为IE10浏览器单从对HTML5支持来说,是微软IE浏览器系列中具有里程碑意义的产品,笔者评测结果如下:
  由以上评测结果可以看出IE10IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性。其中CSS3新特性包括:
  cssregion
  css3多列
  Flexbox
  grid
  定位浮动(positionedfloat)
  3D变换(3Dtransfrom)
  动画(animation)
  渐变(gradient)
  text-shadow
  去掉样式表限制——在IE9之前的版本中,每个页面最多只能加载31个样式表文件,@import也只能最多嵌套4层,IE10中去掉了这些限制。
  因CSS3新特性众多,今天笔者就IE10下CSS3的新特性做详细介绍,并附上实例源码,笔者也会抽更多的时间去总结CSS3的其他特性,并给出实例,希望各位爱好者一起探讨、交流:
  3D变换(3Dtransfrom)
  在CSS3中,用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形,这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用,就会产生不同的效果,使用顺序不同,产生的效果是不一样的。
  CSS中使用rotate方法来实现对元素的旋转,在参数中加入角度值,旋转方式为顺时针旋转。
  使用格式:transform:rotate(45deg)deg是CSS3的“ValuesandUnits”模块中定义的一个角度单位
  1)旋转:
  rotate()方法
  通过rotate()方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
  案例源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  2)缩放:
  scale()方法
  通过scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)
  案例源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  3)倾斜:
  skew()方法
  通过skew()方法,元素转动给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)
  源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  4)移动:
  translate()方法
  通过translate()方法,元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)
  源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  3D变换Perspective:
  perspective变换函数对于3D变换来说至关重要。该函数会设置查看者的位置,并将可视内容映射到一个视锥上,继而投影到一个2D视平面上。如果不指定透视,则Z空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。对于某些变换,例如下图显示的沿Z轴的变换,perspective变换函数对于查看变换的效果来说必不可少。
  源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  5)动画和过渡实现3D变换:
  源代码:
  运行代码复制代码保存代码提示:您可以先修改部分代码再运行!powerbyW3Cfuns.com
  效果:
  文字渐渐离去效果
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市丛台区颐高广场B座13层1304室