/*水平翻转*/

.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. 注入技术--LSP劫持注入

    1.原理 简单来说,LSP就是一个dll程序. 应用程序通过winsock2进行网络通信时,会调用ws2_32.dll的导出函数,如connect,accept等. 而后端通过LSP实现这些函数的底层 ...

  2. PV、TPS、QPS计算公式（转）

    英文解释: PV=page viewTPS=transactions per secondQPS=queries per secondRPS=requests per second RPS=并发数/平 ...

  3. jmeter的jtl日志转html报告常见报错笔记

    问题:生成的jmeter文件可以放任意位置 输入命令转换hmtl报告 PS D:\user\80003288\桌面\Ques> jmeter -g .\test1.jtl -e -o .\rep ...

  4. SQL server 生成数据字典

    Set nocount on ), ) DECLARE Tbls CURSOR FOR ),isnull(g.[value],'-')) AS TABLE_COMMENT FROM INFORMATI ...

  5. React-Native之轮播组件looped-carousel的介绍与使用

    React-Native之轮播组件looped-carousel的介绍与使用 一,关于react-native轮播组件的介绍与对比 1,react-native-swiper在动态使用网页图片,多张图 ...

  6. if判断条件注意！！！

    if(condition){ console.log(condition为true才执行): } 实际上会对condition执行Boolean()转型函数,将其转换成布尔值

  7. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  8. （一）类数组对象NodeList

    NodeList对象的特点: NodeList是一种类数组对象,用于保存一组有序的节点. 可以通过方括号语法来访问NodeList的值,有item方法与length属性. 它并不是Array的实例,没 ...

  9. 进程有一个全局变量i，还有有两个线程。i++在两个线程里边分别执行100次，能得到的最大值和最小值分别是多少？

    转自https://blog.csdn.net/biubiu741/article/details/77990592 i++不是原子操作,也就是说,它不是单独一条指令,而是3条指令: 1.从内存中把i ...

  10. debug错误

    Description "opt_design" can fail with error messages similar to the following: opt_design ...