CSS垂直翻转/水平翻转

访客4年前黑客文章468

一、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); }

注重:

  1. 水平翻转或垂直翻转差别于旋转180度。前者以轴为镜像,后者以点为镜像。
  2. 若是是对称米素,旋转180度和翻转的显示效果基本上就是一致的,然则,非对称米素就会看到显著差异。
  3. 对于后面提到的现在仅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

利益啊什么的我就不牛皮了,结语啊什么的也都省了,一切尽在不言中。

原文:www.zhangxiyu

 

思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

返回列表

上一篇:notice.js

下一篇:CoffeeScript

相关文章

自助kTV多少钱一台,自助售货机多少钱

  成人用品自动售货机几多钱一台? 成人用品自动售货机几多钱一台?   这个要看是什么范例的。多门格子柜较量自制,一般几千元一台;弹簧履带货道的售货机一般一万多到两万多一台,详细看巨细和林柏升设置的。...

黑客技术盗淘宝密码(黑客如何盗取密码)

黑客技术盗淘宝密码(黑客如何盗取密码)

本文目录一览: 1、有人会盗淘宝或支付宝帐号吗? 盗的了吗? 2、我的淘宝密码给黑客知道了。他想改我的密码改不了。但是我改了好几次密码都给他知道。我改怎么办 3、为何电脑桌面上的钉钉软件还有嗯...

速问视频:新用户免费赚100元以上!

最近推的几个趣步模式挖矿, 除了趣环保封号,其他都能赚到钱。已经有好几小我私家向我反馈这个叫速问视频的,可以试试,需要刷脸,但不要钱。天天只用看2分钟,点赞5个视频即可完成任务,预计可以免费赚100米...

黑客帝国2小龙(黑客帝国2详细剧情)

黑客帝国2小龙(黑客帝国2详细剧情)

本文导读目录: 1、黑客帝国2中和尼欧交手的那个中国演员是谁 2、黑客帝国1,2,3讲的是什么? 3、黑客帝国有几部,分别什么剧情 4、黑客帝国2里的双胞胎是谁演的 5、邹兆龙在黑客帝...

云顶之弈10.10版本更新内容一览 最新10.10版本更新了什么

云顶之弈10.10版本更新内容一览 最新10.10版本更新了什么

云顶之弈手游不知不觉就迎来了10.10季中赛版本,上次我们预告了,会有部分S3英雄离开,新增部分S1和S2较为受欢迎的英雄,那这一次谁离开谁留下了呢?云顶之弈手游最新10.10版本更新了什么呢?跟着九...

淘宝店铺基本设置怎么填写?注意事项

要想在淘宝平台上,开实体店必须递交纸版交纳担保金,就可以宣布申请注册一家淘宝网店,以后还必须填好淘宝网的基本资料,例如,店铺简介店铺名字这些,还不知道淘宝网店基础设定如何填好的盆友,赶快看一下下边的內...