/*水平翻转*/
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}
/*垂直翻转*/
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*IE*/
    filter:FlipV;

}

我们在web制作的时候,一旦遇到对称出现的元素的时候,我们只需要处理一个元素就可以了,然后另外一个直接翻转使用下。

CSS垂直翻转/水平翻转提高web页面资源重用性的更多相关文章

  1. CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

    一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...

  2. Java使用泛型类来提高方法的可重用性

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3832268.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...

  3. 提高Web页面性能的技巧

    现在动辄几兆大小的页面加载量,让性能优化成了不可避免的热门话题.WEB 应用越流畅,用户体验就会越好,继而带来更多的访问量.这也就是说,我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DO ...

  4. 如何提高web页面的性能

    1.浏览器渲染原理解析 想要提高网页的性能,首要的便是要理解浏览器渲染原理,下面关于浏览器的原理解析,我们以chrome内核webkit为例,其他内核的浏览器原理也基本大同小异,可触类旁通. 如上图所 ...

  5. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  6. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  7. 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧. 目录 简介 成批处理DHTML更改 使用innerText 使用DOM添加单个元素 扩展SELE ...

  8. web页面的优化

    众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...

  9. spring项目中web-inf下不能引用页面资源

    1.spring项目结构 2.spring结构说明 web-inf目录是不对外开放的,外部没办法直接访问到(即通过url访问),只有通过映射来访问,如映射一个action或servlet通过服务器端跳 ...

随机推荐

  1. c# 和 java <转载>http://www.cnblogs.com/zhucai/archive/2011/02/16/csharp-compare-java.html

    从语法层面来讲,c# 和 java 是非常相似的. <转载> 这篇文章对C#与Java做一个语言级的对比,方便C#转Java或Java转C#的人有个大致了解.这里大致用C#3.0与Java ...

  2. workerman-todpole 执行流程(3)

    通过前两篇文章的分析: workerman-todpole 执行流程(1) workerman-todpole 执行流程(2) 我们已经详细了解了主进程以及子进程的启动细节,但之前的文章并没有考虑 W ...

  3. kubernetes之deployment滚动升级

    参考:https://blog.51cto.com/wutengfei/2116663 创建和管理多个Pod--Deployment Deployment 为 Pod 和 ReplicaSet 提供了 ...

  4. springMVC接受json并打开新页面

    背景:框架中,两个web工程A,B,我的B工程开发了一个对外action接口,A来连,要实现的功能是,A的页面发起一个action请求,到达B的springmvc,通过验证后,打开一个B工程新的tab ...

  5. Linux 文件查找(find)

    find(选项)(参数) 选项 -amin<分钟>:查找在指定时间曾被存取过的文件或目录,单位以分钟计算: -anewer<参考文件或目录>:查找其存取时间较指定文件或目录的存 ...

  6. AIR程序调用本地默认应用程序打开本地文件

    当我用下面语句的时候,可以成功打开桌面文件夹下面的文件: var file:File = File.desktopDirectory.resolvePath("test.jpg") ...

  7. android除去标题栏或全屏

    想要除去标题栏只要加上下面两句代码在Activity的onCreate方法中即可(要在setContentView之前添加). requestWindowFeature(Window.FEATURE_ ...

  8. FireDac 组件说明二

    FDUpdateSQL 生成添加,删除,修改SQL语句 TFDMetaInfoQuery 查询数据源信息 TFDEventAlerter 负责处理数据库事件通知 使用TFDEventAlerter类来 ...

  9. open read split

    open  来打开文件, 其具体表现为 open('文件名或路径', 'r or w or other', 位置?) 其生成一个文件类型的对象 file object. 可写做 FILENAME = ...

  10. sql中case when语句的使用

    case when语句有两种格式:简单case函数和搜索case函数. --简单Case函数CASE sexWHEN '1' THEN '男'WHEN '2' THEN '女'ELSE '其他' EN ...