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

这里可能会质疑？？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>

效果如下：

鼠标移上时