CSS旋转&翻转,兼容方案
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旋转&翻转,兼容方案的更多相关文章
- css透明背景兼容方案
css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...
- 最新CSS兼容方案
CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- 纯CSS 3D翻转一个面(翻转导航菜单 立方体)
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 在线生成CSS样式和兼容的字体格式
http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- NOI题库 09:图像旋转翻转变换
NOI题库开始的题,也是略水,当然也是大水,所以彼此彼此 09:图像旋转翻转变换 总时间限制: 1000ms 内存限制: 65536kB 描述 给定m行n列的图像各像素点灰度值,对其依次进行一系列操作 ...
- Emoji表情符号兼容方案(适用ios,android,wp等平台)
http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...
随机推荐
- 有关索引的DMV(转)
转自:http://www.cnblogs.com/CareySon/archive/2012/05/17/2505981.html 1.查看那些被大量更新,却很少被使用的索引 SET TRANSAC ...
- MVC4怎样在cshtml的引号内添加变量?
@{;} @foreach (var item in Model) { i++; <tr> <td style="text-align:center">@i ...
- 记一次CurrentDirectory导致的问题
现在项目里需要实现一个功能如下: A.exe把B.exe复制到临时目录,然后A.exe退出,B.exe负责把A.exe所在的整个目录删除. 实现: A.exe用CreateProcess创建B.exe ...
- 14-spring学习-变量操作
表达式所有操作都是可以以变量形式出现的. 观察变量的定义: package com.Spring.ELDemo; import org.springframework.expression.Evalu ...
- 如何配置 Oracle VirtualBox 中的客户机与物理机网络
当你在 Oracle VirtualBox 虚拟机软件 中安装了各种操作系统时,你可能需要实现物理机与虚拟机之间的相互访问. 在这篇文章中,我们将会以最简单明了的方式来说明如何配置客户机与 Linux ...
- 【图像算法】彩色图像切割专题八:基于MeanShift的彩色切割
>原理曾经的博客中已经有对meanshift原理的解释,这里就不啰嗦了.国外的资料看这:http://people.csail.mit.edu/sparis/#cvpr07 >源代码 核心 ...
- AutoFac文档4(转载)
目录 开始 Registering components 控制范围和生命周期 用模块结构化Autofac xml配置 与.net集成 深入理解Autofac 指导 关于 词汇表 自动装配 从容器中可用 ...
- unity, RT .DiscardContents ()导致android上RT不显示
RT .DiscardContents ()可以消除pc上的warning,但是会导致android上RT不显示.
- [Jobdu] 题目1504:把数组排成最小的数
题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 输入: 输 ...
- vim在vps内的终端内支持molokai
vps的终端内默认的颜色数好像很低.对molokai的支持一直不好. 后查找后得知:vim终端方式默认为16色,而molokai为256配色方案 我以为这是硬件问题,没有解决办法,一直到有一天,我在配 ...