CSS垂直翻转/水平翻转

/*垂直翻转*/ .flipy{ -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); /*IE*/ filter:FlipV; } /*css三角，均是向下方向*/ .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;} .menu:hover{background-color:#f5f5f5; border:1px solid #ccc; text-decoration:none;} .menu:hover .cor{margin-bottom:auto; vertical-align:2px;}




0.0淘宝网顶部条条上下拉列表项都有个向下的卡哇伊的小三角，这个是css3实现的。




HTML代码：

<a href="javascript:" id="menu" class="menu">我的淘宝<i id="flipCor" class="cor corg6"></i></a>

JS代码：

$("#menu").bind("mouseover", function() { $("#flipCor").addClass("flipy"); }).bind("mouseout", function() { $("#flipCor").removeClass("flipy"); });