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. sass 和 css 互转网址

    sass to css:https://www.sassmeister.com/ css to sass:http://css2sass.herokuapp.com/

  2. CompletableFuture 详解

    转 http://www.jianshu.com/p/6f3ee90ab7d3 CompletableFuture类实现了CompletionStage和Future接口.Future是Java 5添 ...

  3. 33、深入理解Java的接口和抽象类

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...

  4. 转载【linux】Linux学习之CentOS6.x+7.x---网卡的配置

    转载至:http://www.cnblogs.com/smyhvae/p/3932903.html [正文] Linux系统版本:Centos 6.5 Linux系统版本:Centos 7 目的:将c ...

  5. iOS开发-代码片段(Code Snippets)提高开发效率

    简介 在 XCode4 引入了一个新特性,那就是“代码片段(Code Snippets)”.对于一些经常用到的代码,抽象成模板放到 Code Snippets 中,使用的时候就只需要键入快捷键就可以了 ...

  6. Linux命令-目录处理命令:rmdir

    rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败

  7. EMQ --集成搭建

    集群方式接受 Erlang/OTP 最初是爱立信为开发电信设备系统设计的编程语言平台,电信设备(路由器.接入网关.…)典型设计是通过背板连接主控板卡与多块业务板卡的分布式系统. Erlang/OTP ...

  8. mysql innodb的重要组件

    innodb包涵如下几个组件 一.innodb_buffer_pool: 1 它主要用来缓存数据与索引(准确的讲由于innodb中的表是由聚集索引组织的,所以数据只不是过主键这个索引的叶子结点). 二 ...

  9. nginx Beginner’s Guide

    这个引导给nginx做了一个基本的介绍,并描述了nginx可以做的一些基本事情. 假设nginx已经安装在了读者的电脑上,如果没有请查看官网安装页. 这个引导描述了怎么去开始和结束nginx,从新加载 ...

  10. 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM 各公共网关接口介绍

    CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上. CGI可以用任何一 ...