CSS旋转&翻转,兼容方案

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

 转自http://aijuans.iteye.com/blog/19364921 /*水平翻转*/
 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 }
时间: 2024-10-12 23:28:49

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

最新CSS兼容方案

CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: rgb(68, 68, 68); font-family: 'Hiragino Sans GB', Tahoma, Simsun, 'Microsoft Yahei';">} html* .e{/*Sa IE7 OP*/ color: rgb(68, 68, 68); font-family

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

css 清除浮动 兼容IE+, FF

上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>css 清除浮动 兼容IE+, FF</title> <style type="text/css"> .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; c

IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统)

IOS6屏幕旋转详解(自动旋转.手动旋转.兼容IOS6之前系统) 转自:http://blog.csdn.net/cococoolwhj/article/details/8208991 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInterfaceOrientation 来单独控制某个UIViewController的方向,需要哪个viewController支持旋转,只需要重写shouldAutorotateToInterfaceOrientation方法.

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码:固定悬浮在网页一侧的效果应用非常的频繁,尤其是客服系统或者公告系统,CSS提供了position:fixed属性即可实现此功能,但是IE6浏览器并不支持,虽然IE6的用户越来越少,但是毕竟还是有用户在使用,所以最好还是要实现兼容效果,下面就是一段能够兼容所有浏览器的代码实例,希望能够给需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

CSS旋转图片

1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

Emoji表情符号兼容方案

Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里面已经是很流行使用的一种表情. 手机上如何使用emoji: 1.iphone.ipad系统:安装emoji free,再设置-通用-键盘-国际键盘-添加新的键盘,然后把emoji添加在里面即可在发短信和一些输入文本的文本框中输入表情. IOS 5用户可直接从通用中添

Drawable 着色的后向兼容方案

看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种方式来实现 Drawable 着色或者实现类似的功能.但是,这种方案并不完善,本文将介绍一个完美的后向兼容方案. 解决方案 其实在 Android Support V4 的包中提供了 DrawableCompat 类,我们很容易写出如下的辅助方法来实现 Drawable 的着色,如下: public

css hack IE兼容调试小结(Webstorm、VS2010),有图有真相,研究了一中午

练习了些CSS代码,发现IE各种不兼容,打算用css hack调试IE 6 7 8.网上搜了些方法,虽然可行,但webstorm和VS2010各种提示报错让人不爽,试了几个小时,最终结论如下: 1.只有IE6 7认那些乱七八槽的符号,可随便用一个(% ^ &之类都行),但大家习惯用*或+,如*.background,这样只有IE6 7才认.但是webstorm会把语法检查把上下行一起标错,看起来不爽,VS干脆就报错不让ctrl E D格式化. 2.!important虽然可用,但要注意顺序,且这