CSS垂直翻转/水平翻转提高web页面资源重用性
一、CSS下兼容性的元素水平/垂直翻转实现
随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:
/*水平翻转*/ .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; }
其中,就目前而言,对于基于webkit核心的浏览器,如Chrome以及Safari,实现元素的垂直翻转或是水平翻转也可以使用如下样式:
/*水平翻转*/ .flipx { transform: rotateY(180deg); }/*垂直翻转*/ .flipy { transform: rotateX(180deg); }
注意:
- 水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像,后者以点为镜像。
- 如果是对称元素,旋转180度和翻转的显示效果基本上就是一致的,但是,非对称元素就会看到明显差异。
- 对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg),这里有个大写的Y。我们都知道Y表示纵轴,所以我们可能会误以为这里实现的是垂直翻转,其实非也,这里的Y表示元素以纵轴为镜像翻转,也就是水平翻转了。
由于这种水平或是垂直翻转性质的东西基本上类似于镜像拷贝,于是,我们在web制作的时候,一旦遇到对称出现的元素的时候,我们只需要处理一个元素就可以了,然后另外一个直接翻转使用下。例如淘宝首页的这个左右指向的按钮:
我们非得分别把这两个小按钮图标都放在CSS Sprite里面吗?显然,答案是否定的。例如,我们只处理下朝左指向的小按钮背景图,然后朝右的直接使用水平翻转就ok啦。岂不节约了切图的时间,顺便少了那么一点点图片的东西,同时呢,CSS代码量肯定也减少了——无需对左右两个小按钮分别写hover效果啦!
这光巴拉巴拉唾沫横飞显然不能让人信服,所以,我们来看几个实例的例子吧,看看如何利用水平翻转,或是垂直翻转来提高我们web页面上资源的重用性滴。
二、水平翻转图片重用应用实例
您可以狠狠地点击这里:水平翻转图片重用demo
demo页面中有个不对称的投影图片,分别用在张含韵小姐图片下,以及某段内容标题下,以达到某种卷边效果。我们会发现,这两处的投影图片是不一样的,一个是右下方的投影,还有一个是左下方的投影。如果你遇到这样的设计你怎么办,是分别切出共2张图吗?
既然本文是将翻转的,显然,这里显然不是两张不同的投影图片了,而是同一张,只是其中某一个水平翻转了,如下截图标示:
前前后后就只调用一张图片,是不是资源得到了重用呢?
相关代码可参见demo,这里就不重复展示了。
注意:由于IE下的元素翻转是使用的filter滤镜,所以,最好应用翻转的图片尺寸不要拉伸,否则,某些情况下,在IE8浏览器中可能会看到让他讨厌的黑色边缘线的。
三、水平翻转元素重用应用实例
淘宝网顶部条条上下拉列表项都有个向下的卡哇伊的小三角,如下图所示:
鼠标移上去小三角就会转向:
但是呢,淘宝的做法是让小三角旋转个180度,啧啧啧,这里的小三角幸好是左右对称的,如果是长得类似◢的小三角,就只有望洋兴叹的份了。所以,为了更广泛地适应各类翻转情况,不要去使用180度的旋转了,直接使用翻转,OK,本部分的demo效果虽然与淘宝首页的三角效果有些类似,但是,实现的原理是截然不同的,淘宝的是旋转,而我的demo是翻转。
您可以狠狠地点击这里:水平翻转元素重用demo
你可以看到如下的效果变化(默认 → 鼠标移上去):
→
好处啊什么的我就不牛皮了,结语啊什么的也都省了,一切尽在不言中。
CSS垂直翻转/水平翻转提高web页面资源重用性相关推荐
- 提高Web页面渲染速度的7个技巧
用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...
- web前端好学吗?如何能提高CSS编写技巧 提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
- 等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放
非响应式web网页,在小于web网页设置的宽度的分辨率电脑下显示,会出现滚动条滚动显示超出分辨率的内容,如:网页主体宽度为设置为width:1400px,那么在1280分辨率电脑的浏览器上访问,就会出 ...
- 如何提高Java代码的可重用性?
提高java代码可重用性有哪些方法措施,以下就讲解了三种关于提高java代码可重用性的措施,一起来了解一下吧~ 改写类的实例方法 通过类继承实现代码重用不是精确的代码重用技术,因此它并不是最理想的代码 ...
- 从零开始构建HTML 5 Web页面
HTML 5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频,Google 已经弃 ...
- java 重用性_Java开发重用性必备的三大核心知识点
互联网开发行业的人在问我提高java代码可重用性有哪些方法措施,那今天我就给大家详细讲下提高java代码可重用性的措施吧,希望不懂的可以从中学习加以理解,懂的也可以加以巩固下这些知识点,我把提高jav ...
- teleport 组件的作用_对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下
我们所有人都希望编写更少的代码,同时也要做更多的事情.为了实现这一点,我们构建了组件,以便可以多次重用它们. 有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它. 这里有 ...
- 对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!
作者:Michael Thiessen 译者:前端小智 来源:news 点赞再看,微信搜索 [大迁世界] 关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://githu ...
- 提高性能:用RequireJS优化Wijmo Web页面
上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...
最新文章
- Python 玩出花儿,把罗小黑养在自己桌面
- 逃离美股!瑞信给出了11个理由
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1085:球弹跳高度的计算
- java对象布局查看工具_Java 查看对象布局工具 - Java Object Layout
- mini web框架-2-显示页面
- c++之std::distance()函数
- 关于HRESULT判断的宏(SUCCEEDED/FAILED)
- eclipse设置黑色主题
- 稳健性估计—— M 估计
- penetration testing report
- 【5G学习笔记-8】38.306 36.306 User Equipment (UE) radio access capabilities 以及终端CDRX能力上报 featureGroupIndic
- python对行为进行推理_一道有意思推理题,用python来解答
- 抖音自媒体是如何赚钱的,怎么做才能挣到更多的钱?
- java会变得更简单吗_spring 第一篇(1-1):让java开发变得更简单(下)
- 【微信小程序】WXSS和全局、页面配置
- Pr 入门系列之六:添加视频效果
- FANUC 0I 系列打开系统刀具寿命管理功能
- uniapp动态设置导航栏和标题栏语言
- 支付宝、微信共同宣布:将“取消”扫码支付,使用全新付款方式!
- C语言百日千题系列之《忘情水题》第一日
热门文章
- ldconfig与 /etc/ld.so.conf
- 01,完全,多重,分组
- C/C++ 对优先级与结合性的理解
- android radiooptions简介
- ARM处理器全解析:A8/A9/A15都是什么?
- vantui框架switch上显示提示文字_?Switch主机账号官网注册教程
- swift中使用core data
- JS组件系列——封装自己的JS组件,你也可以
- 正则表达式grep sed awk总结
- c++之五谷杂粮---2