/*水平翻转*/

.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. redux模块化demo

    store.js 在redux中 store 是唯一的. import {createStore} from 'redux'; import reducer from './reducer' // 引 ...

  2. java程序员一些初中级面试题（数据库部分）

    说出一些数据库优化方面的经验? 1.从JDBC编程的角度讲,用PreparedStatement一般来说比Statement性能高,因为在使用时,SQL语句被预编译并存储在PreparedStatem ...

  3. jquery获取select多选框选中的值

    select下拉框选中的值,用jquery大家应该都会获取, $("#selectBox option:selected").val(); 如果select是多选的,也这么获取的话 ...

  4. hashCode和equals的关系分析

    hashCode:说白了,简单的就看做一个函数,但是该函数有可能出现:对于某个x值,存在不止一个y值与之对应.这种情况就叫哈希碰撞. 那么: 1.如果hashCode相等,两个对象不一定是同一个对象( ...

  5. linux php7 安装redis扩展

    1,下载redis扩展地址:https://pecl.php.net/package/redis 选择你需要的版本 上传redis-3.1.3.tar.gz到/usr/local/src目录 cd / ...

  6. vue 使用技巧总结 19.01

    组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...

  7. JQuery跳出each循环的方法(包含数组遍历）

    0. 前言 也许我们通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环?(即用each方法内,当不满足条件时想break跳出循环体,想continue继续执行下一个循环遍 ...

  8. How to reset macOS Icon Cache

    find . -name cuthead.txt find /private/var/folders/ -name 'com.apple.dock.iconcache' -delete find /p ...

  9. 提交已经注入文件的表单给后台上传图片 使用ajaxsubmit

  10. codeforces484A

    Bits CodeForces - 484A Let's denote as  the number of bits set ('1' bits) in the binary representati ...