CSS代码,高级浏览器使用transform,ie用滤镜实现。

 转自http://aijuans.iteye.com/blog/1936492
1 /*水平翻转*/
2 .flipx {
3 -moz-transform:scaleX(-1);
4 -webkit-transform:scaleX(-1);
5 -o-transform:scaleX(-1);
6 transform:scaleX(-1);
7 filter:FlipH();
8 }
9 /*垂直翻转*/
10 .flipy {
11 -moz-transform:scaleY(-1);
12 -webkit-transform:scaleY(-1);
13 -o-transform:scaleY(-1);
14 transform:scaleY(-1);
15 filter:FlipV();
16 }
17 /*顺时针旋转90度*/
18 .rotate90 {
19 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
20 -moz-transform: rotate(90deg);
21 -o-transform: rotate(90deg);
22 -webkit-transform: rotate(90deg);
23 transform: rotate(90deg);
24 }
25 /*顺时针旋转180度*/
26 .rotate180 {
27 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
28 -moz-transform: rotate(180deg);
29 -o-transform: rotate(180deg);
30 -webkit-transform: rotate(180deg);
31 transform: rotate(180deg);
32 }
33 /*顺时针旋转270度*/
34 .rotate270 {
35 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
36 -moz-transform: rotate(270deg);
37 -o-transform: rotate(270deg);
38 -webkit-transform: rotate(270deg);
39 transform: rotate(270deg);
40 }

CSS旋转&翻转,兼容方案的更多相关文章

  1. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

  2. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  3. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  4. 纯CSS 3D翻转一个面(翻转导航菜单 立方体)

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

  5. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  6. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  7. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  8. NOI题库 09:图像旋转翻转变换

    NOI题库开始的题,也是略水,当然也是大水,所以彼此彼此 09:图像旋转翻转变换 总时间限制: 1000ms 内存限制: 65536kB 描述 给定m行n列的图像各像素点灰度值,对其依次进行一系列操作 ...

  9. Emoji表情符号兼容方案(适用ios,android,wp等平台)

    http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...

随机推荐

  1. Unity Game Starter Kit for Windows Store and Windows Phone Store games

    原地址:http://digitalerr0r.wordpress.com/2013/09/30/unity-game-starter-kit-for-windows-store-and-window ...

  2. 查看sqlserver 2008中性能低下的语句

    经常使用这个语句来查看性能低下的sql语句: SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical ...

  3. SIP(Session Initiation Protocol,会话初始协议)

    SIP(Session Initiation Protocol,会话初始协议)的开发目的是用来帮助提供跨越因特网的高级电话业务.因特网电话(IP电话)正在向一种正式的商业电话模式演进,SIP就是用来确 ...

  4. 重要:Linux下IDE--KDevelop (用来跟踪调试C++) Ubuntu下QT4开发环境的搭建及初体验

    Linux下安装Qt4有两大问题,一是环境变量,二是IDE(集成开发环境).安装Qt4也有两种方法,一种是apt-get,一种是下载源码包,而后 一种方法已经人证实是最有可能不好使的方法.所以我最终采 ...

  5. Intellij IDEA 14使用maven3.3.3 问题

    Intellij IDEA 14使用maven3.3.3报错: -Dmaven.multiModuleProjectDirectory system propery is not set. Check ...

  6. fatal error LNK1123: 转换到 COFF 期间失败:文件无效或损坏

    问题出现背景: 原本电脑里是装着VS2015的,其使用的是.NET 4.5,当再安装VS2010之后,不能与当前的.NET平台兼容.卸载VS2015时,不会恢复.NET 4.0. l 当VS2015安 ...

  7. Android上怎样使用《贝赛尔曲线》

    首先对于<赛贝尔曲线>不是很了解的童鞋,请自觉白度百科.google. 为了方便偷懒的童鞋,这里给个<贝赛尔曲线>百科地址,以及一段话简述<贝赛尔曲线>: < ...

  8. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  9. Spring Cloud 模块简介2

    前面一篇文章谈到微服务基础框架,而Netflix的多个开源组件一起正好可以提供完整的分布式微服务基础架构环境,而对于Spring Cloud正是对Netflix的多个开源组件进一步的封装而成,同时又实 ...

  10. Sql UNION 合并多个结果集并排序

    1.建表语句及测试数据: --创建表A CREATE TABLE A( A1 int NULL, A2 nvArchAr(50) NULL, A3 decimAl(18, 0) NULL ) --测试 ...