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. 嵌入式 如何定位死循环或高CPU使用率(linux)

    如何定位死循环或高CPU使用率(linux)  确定是CPU过高 使用top观察是否存在CPU使用率过高现象 找出线程 对CPU使用率过高的进程的所有线程进行排序 ps H -e -o pid,tid ...

  2. Android研究之为基于 x86 的 Android* 游戏选择合适的引擎具体解释

     摘要 游戏开发者知道 Android 中蕴藏着巨大的机遇. 在 Google Play 商店的前 100 款应用中,约一半是游戏应用(在利润最高的前 100 款应用中.它们所占的比例超过 90% ...

  3. No implementation found for long com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create()

    3-21 10:14:20.833 2892-2892/? E/art: No implementation found for long com.baidu.platform.comjni.map. ...

  4. android6.0权限管理工具EasyPermissionUtil

    前言 android6.0開始,权限的申请发生了改变,申请变的动态化,也就是执行时权限,和iOS相仿,动态化的意思是指,在每次使用须要危急权限的方法的时候.须要检查程序是否获得了该权限的许可.动态化的 ...

  5. 【bat】通过for循环复制一张图片100次

    代码如下: @echo off set "F=1" cd C:\Users\Thinkpad\Desktop\img for /L %%F IN (1,1,100) DO COPY ...

  6. javascript 自定义动画函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. android下载

    1. 源码下载链接: http://source.android.com/source/downloading.html 参考链接: Android源码下载方法详解 2. SDK下载 http://d ...

  8. python笔记-列表和元组

    列表和元组: -可以将列表和元组当成普通的数组 -列表和元组可以保存任意类型的python对象 -通过从0开始的数字索引访问元素 -列表和元组可以存储不同类型的对象 列表和元组的区别: -列表元素使用 ...

  9. PostgreSQL远端访问

    PostgreSQL默认的理念是运行在本地地址且不允许外部访问的. 如果想通过Navicat for postgreSql这种优秀的第三方软件访问需要做出如下修改: 一.启动在外部可访问的地址上 编辑 ...

  10. some issues that you should be take care of when use the plupload module

    1. the config arguments 'browse_button' should not be a single element like button etc. because in i ...