/*水平翻转*/ .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); }
需要注意
- 水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。
- 如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。
- 对于后面提到的目前仅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>
效果如下：
鼠标移上时
