/*水平翻转*/

.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;

}

这里可能会质疑？？ScaleY不是Y轴缩放的比例吗？为什么等于-1时会是翻转？是什么原理？

用数学思维解释下：

Scale 要有相对点的，假设相对的点是（x0，y0）原来控件上某点为（x,y）那么执行Scale=-1后的点(X,Y)有：(Y-y0)= -1×(y-y0) 即：Y=(2y0-y)。即每个像素的y值乘上-1

对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式：

/*水平翻转*/

.flipx { transform: rotateY(180deg); }

/*垂直翻转*/

.flipy { transform: rotateX(180deg); }

需要注意

  1. 水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。
  2. 如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。
  3. 对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。

▲这里的小三角幸好是左右对称的，如果是长得类似◢的小三角，就只有望洋兴叹的份了。所以，为了更广泛地适应各类翻转情况，不要去使用180度的旋转了，直接使用翻转。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

    /*垂直翻转*/

    .flipy{

        -moz-transform:scaleY(-1);

        -webkit-transform:scaleY(-1);

        -o-transform:scaleY(-1);

        transform:scaleY(-1);

        /*IE*/

        filter:FlipV;

    }

    .cor{

        display:inline-block;

        width:0;

        height:0;

        margin-bottom:-2px;

        border-width:4px;

        border-style:solid dashed dashed;

        overflow:hidden;

    }

    .corg6{

        border-color:#666 transparent transparent;

    }

    .menu{

        display:inline-block;

        padding:2px 8px;

        border:1px solid #fff;

        color:#333;

        text-decoration:none;

    }

    .menu:hover{

        background-color:#f5f5f5;

        border:1px solid #ccc;

        text-decoration:none;

    }

    .menu:hover .cor{

        margin-bottom:auto;

        vertical-align:2px;

    }

</style>

</head>

<body>

<a href="javascript:" class="menu">

    我的淘宝

    <i id="flipCor" class="cor corg6"></i>

</a>

</body>

<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">

    $(".menu").bind("mouseover", function() {

    $("#flipCor").addClass("flipy");

    }).bind("mouseout", function() {

        $("#flipCor").removeClass("flipy");

    });

</script>

</html>

效果如下：

鼠标移上时

CSS垂直翻转与水平翻转的更多相关文章

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

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

  2. CSS垂直翻转/水平翻转提高web页面资源重用性

                    /*水平翻转*/ .flipx {     -moz-transform:scaleX(-1);     -webkit-transform:scaleX(-1);   ...

  3. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  4. [转] CSS direction属性简介与实际应用 ---张鑫旭

    一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...

  5. 【转载】CSS direction属性简介与实际应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  6. CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

  7. CSS3水平翻转样式和background-size兼容问题

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

  8. Excel 二维数组(数据块)旋转/翻转技巧

    Excel 二维数组(数据块)旋转/翻转技巧 原创 2017-12-30 久石六 久石六 工作中遇到个问题,需要将Excel中的数据块或者说二维数组向右旋转90度,才能再加工处理.当然,不是旋转文本方 ...

  9. 小记——关于Tilemap图块索引编码

    图集 地图 TileMap 导出的 .Tmx 文件记录了地图所有信息,其中编辑好的图块信息会存放在每个图层的 Data 节点下.以下是一个 10x10 的图层,可以看到,Data 节点记录了每个图块对 ...

随机推荐

  1. Hibernate two table same id

    Hibernate更新数据(不用update也可以) - 森林木马 - 博客园 https://www.cnblogs.com/owenma/p/3481497.html hibernate级联更新会 ...

  2. opencv2\flann\matrix.h(69): error C2059: 语法错误:“,”

    在提示错误的matrix.h头文件中,修改一下,在free前加上_ ,即FLANN_DEPRECATED void _free() .

  3. Mysql 5.7 Windows 版本(zip)的安装简单过程

    1. 下载zip包 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.25-winx64.zip 2. 找一个目录解压缩 3. 简单进行安装: ...

  4. K3BOM跳层

    A自制件,B自制件,C外购件 ,结构为A-B-C 如果需要跳层,则设置A-B跳层,B-C跳层,则生成A计划订单,C计划订单, 假设单独A-B跳层,则MRP运算出的结果也是A计划订单,B计划订单,C计划 ...

  5. Git发生SSL certificate problem: certificate ha错误的解决方法

    这两天,不知道为什么,用Git提交代码到服务器时,总出现SSL certificate problem: unable to get local issuer certificate while ac ...

  6. CSS自定义属性expression_r

    CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心.有了CSS的自定义属性expr ...

  7. EXAMPLE FOR PEEWEE 多姿势使用 PEEWEE

    使用 PEEWEE 断断续续的差不多已经三个年头了,但是没有像这次使用这么多的特性和功能,所以这次一并记录一下,需要注意的地方和一些使用细节,之后使用起来可能会更方便. 因为是使用的 SQLAched ...

  8. cmd & tree & bash

    cmd & tree & bash bug E: Unable to locate package tree solution # 1. update $ sudo apt-get u ...

  9. python数据结构与算法第十三天【归并排序】

    1.代码实现 def merge_sort(alist): if len(alist) <= 1: return alist # 二分分解 num = len(alist)/2 left = m ...

  10. 多IP地址--笔记

    多IP 地址特性使虚拟用户可以在一个load generator上运行且被识别为多个IP地址 1 虚拟IP是同一个generator上的多个IP,这种分配过程由controller自动来进行 2 对于 ...