方向:rtl;可能就是你要找的。

还有一个真正镜像的rotateY:

transform: rotateY(180deg);

这一点或许更清楚，也更容易理解。

编辑:似乎在Opera上不起作用……遗憾的是。但它在Firefox上运行良好。我猜这可能需要隐含地说我们正在做某种翻译3d ?或者类似的东西。

你可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

你可以试试box-reflect

box-reflect: 20px right;

参见CSS属性框-反射兼容性?欲知详情

我们可以使用非常少的代码，使用css关键帧和它的alternate属性(尝试删除alternate来查看区别)制作非常酷的文本效果:

跨度{ 粗细:1000;字体大小:3.3 em; ｝ 小{ 显示:inline-block; 字体大小:2.3 em; 动画:1s无限交替冷却旋转 ｝ @keyframes coolrotate { 从{ 变换:scale(1,1) translate(-0.1em, 0) ｝ , { 变换:scale(- 1,1) translate(0,0) ｝ ｝ < span > < span > c > < /跨度 小> < o < /小> < span > o < / span > <小> L > < /小 < >小…小> < / < / span >

为了跨浏览器兼容，创建这个类

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

并将其添加到您的图标类，即。

<i class="icon-search mirror-icon"></i>

以获得左侧有手柄的搜索图标