我们可以使用非常少的代码，使用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 >

还有一个真正镜像的rotateY:

transform: rotateY(180deg);

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

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

真正的镜子:

.mirror { 显示:inline-block; 字体大小:30 px; -webkit-transform:矩阵(-1,0,0,1,0,0); -moz-transform:矩阵(-1,0,0,1,0,0); -o-transform:矩阵(-1,0,0,1,0,0); 变换:矩阵(-1,0,0,1,0,0); ｝ <span class='mirror'>镜像文本

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

css:

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

我在网上搜罗了包括

Stack Overflow回答， MSDN文章, http://css-tricks.com/almanac/properties/t/transform/, http://caniuse.com/搜索=变换, http://browserhacks.com/, http://www.useragentman.com/IETransformsTranslator/。

这个解决方案似乎适用于包括IE6+在内的所有浏览器，使用scale(-1,1)(适当的镜像)和适当的filter/-ms-filter属性(IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

只是增加了一个工作演示水平和垂直的镜子翻转。

.horizontal-flip { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .vertical-flip { -moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } <div class="horizontal-flip"> Hello, World <input type="text"> </div> <hr> <div class="vertical-flip"> Hello, World <input type="text"> </div>