/*水平翻转*/

.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. js总结：增加和减少文本框

    <head><script>var count = 0; function add(){ if(count<3) { count++; var x= document.c ...

  2. beego 各种形式的路由实例

    基本路由 基本路由就是和http.Handle和http.HandleFunc一样都是绑定固定的路径,比如绑定了4个路由映射: 定义的4个控制器中,匹配哪一个路由,就输出对应的控制名. beego.R ...

  3. promise-笔记

    promise 封装Promise var fs = require('fs') function pReadFile(filePath) { return new Promise(function ...

  4. MySQL之优化

    当 MySQL 单表记录数过大时,增删改查性能都会急剧下降,本文会提供一些优化参考,大家可以参考以下步骤来优化. 一. 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻 ...

  5. 关于PHP批量图片格式转换的问题--本文转成webp, 其他过程格式一样

    最近要把项目中的图片全部生成webp格式, 过程整理一下,    (直接存在本地,或者图片链接存在数据库都可以看看) 首先,肯定是批量处理, 一个php处理不了这么多, 会爆内存的, 个人建议用aja ...

  6. IdentityServer4【Topic】之授权类型

    Grant Types 授权类型 授权类型指出了一个客户端如何与IdentityServer进行交互.OpenID Conect和OAuth2.0定义了如下的授权类型: Implicit Author ...

  7. PreparedStatement 与 Statement 的区别

    1. PreparedStatement 接口继承 Statement, PreparedStatement 实例包含已编译的 SQL 语句,所以其执行速度要快于 Statement 对象. 2.作为 ...

  8. Azure系列2.1.10 —— CloudBlobClient

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...

  9. Oracle NVL空值处理函数

    --NVL空值处理函数 --需求:显示价格表中业主类型ID为1的价格记录 如果上限值为null,则显示9999999 ) from dual; select * from t_pricetable ) ...

  10. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...