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. 【树莓派】树莓派raspi-config配置

    发现有些树莓派盒子,输入的结果和键盘的实际字符有差异,比如输入 | ,结果显示为 ~. 这是因为树莓派的键盘设置问题. 可以通过设置raspi-config进行配置: 第一次使用树莓派的时候需要进行一 ...

  2. 取石子 (四)_nyoj_161(博弈-奇异矩阵).java

    取石子 (四) 时间限制: 1000 ms  |  内存限制: 65535 KB 难度: 4   描述 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是 ...

  3. 说说PHP中的命名空间相关概念

    说说PHP中的命名空间相关概念 1. PHP中的命名空间是什么? 什么是命名空间?"从广义上来说,命名空间是一种封装事物的方法.在非常多地方都能够见到这样的抽象概念. 比如.在操作系统中文件 ...

  4. Python 对字符串切片

    对字符串切片字符串 'xxx'和 Unicode字符串 u'xxx'也可以看成是一种list,每个元素就是一个字符.因此,字符串也可以用切片操作,只是操作结果仍是字符串:>>> 'A ...

  5. 解决github push错误The requested URL returned error: 403 Forbidden while accessing(转)

    github push错误: git push error: The requested URL returned error: 403 Forbidden while accessing https ...

  6. 偏最小二乘回归(PLSR)- 1 概览

    1. 概览 偏最小二乘算法,因其仅仅利用数据X和Y中部分信息(partial information)来建模,所以得此名字.其总体处理框架体现在下面两图中. 建议先看第2部分,对pls算法有初步了解后 ...

  7. Web中路径问题

    如果在web项目中需要使用路径,如:转发.重定向还有超链接等. 原则:”一切web路径以/开始” 那么/的路径一定是相对路径,那么/到底代表哪一个相对路径是需要智慧的. 如果该路径是给服务器使用的,那 ...

  8. 【LeetCode】78. Subsets (2 solutions)

    Subsets Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset ...

  9. mybatis实战教程(mybatis in action)之四:实现关联数据的查询

    有了前面几章的基础,对一些简单的应用是可以处理的,但在实际项目中,经常是关联表的查询,比如最常见到的多对一,一对多等.这些查询是如何处理的呢,这一讲就讲这个问题.我们首先创建一个Article 这个表 ...

  10. C#指南,重温基础,展望远方!(7)C#结构

    结构是可以包含数据成员和函数成员的数据结构,这一点与类一样:与类不同的是,结构是值类型,无需进行堆分配. 结构类型的变量直接存储结构数据,而类类型的变量存储对动态分配的对象的引用. 结构类型不支持用户 ...