详解IE10下CSS3 3D变换.docxVIP

详解IE10下CSS3 3D变换(3D transfrom)及实例教程 作者liwei3gjob 详解IE10下CSS3?3D变换(3D?transfrom)及实例教程,本文章所有实例均可无需修改,直接运行. ?????自2011年4月，微软在其召开的MIX11技术大会上发布了IE10浏览器的首个平台预览版，并宣布面向公众开放免费下载,并随后陆续发布了一系列的预览版，IE10在硬件加速、数据处理速度、网站页面打开速度上都有了提升，在页面处理和视觉处理功能上也进行了加强。 但令开发者关注和热议的还是IE10能否更好地支持HTML5??因为早在IE10之前就有人这样评论IE浏览器：IE浏览器是Web新技术发展道路上的绊脚石。IE6的辉煌时代已经结束，IE7也是这样，即便是IE8，也仍然不能称为一款“现代浏览器”。而IE9对HTML5的支持尚不完全，比如不支持Web?Sockets和Web?Workers。要知道这两项可是对HTML5来说是非常重要的新特性。 ????笔者个人认为IE10浏览器单从对HTML5支持来说，是微软IE浏览器系列中具有里程碑意义的产品，笔者评测结果如下： ???? ??? 由以上评测结果可以看出IE10IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。(/en-us/ie/gg192966) ,其中CSS3新特性包括： CSS3 ·?css?region ·?css3多列 ·?Flexbox ·?grid ·?定位浮动(positioned?float) ·?3D变换(3D?transfrom) ·?动画(animation) ·?渐变(gradient) ·?text-shadow ·?去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。 因CSS3新特性众多，今天笔者就IE10下CSS3的新特性做详细介绍，并附上实例源码，笔者也会抽更多的时间去总结CSS3的其他特性，并给出实例，希望各位爱好者一起探讨、交流： ·?3D变换(3D?transfrom) ????在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。 CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。 使用格式:???transform:?rotate(45deg)??deg是CSS3的“Values?and?Units”模块中定义的一个角度单位 1)旋转： rotate()?方法 通过?rotate()?方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 案例源代码 [html]?view plaincopy 1. !DOCTYPE?html?? 2. ?? 3. html?? 4. ?? 5. ????head?? 6. ?? 7. ??????????meta?charset=utf-8?/?? 8. ?? 9. ??????????titleIE10下CSS3新特性之3D变换(3D?transfrom)应用实例-liwei3gjob/title?? 10. ?? 11. ?????????style?? 12. ?? 13. ??????????div?{?? 14. ?? 15. ??????????????width:?300px;?? 16. ?? 17. ?????????????margin:?150px?auto;?? 18. ?? 19. ????????????background-color:?yellow;?? 20. ?? 21. ?????????????text-align:?center;?? 22. ?? 23. ?????????????-webkit-transform:?rotate(45deg);????/*?for?Chrome?||?Safari?*/?? 24. ?? 25. ?????????????-moz-transform:?rotate(45deg);???????/*?for?Firefox?*/?? 26. ?? 27. ?????????????-ms-transform:?rotate(45deg);????????/*?for?IE??旋转45度*/?? 28. ?? 29. ?????????????-o-transform:?rotate(45deg);?????????/*