你可以使用CSS镜像/翻转文本？
是否可以使用CSS / CSS3来镜像文本？
具体来说，我有这个剪刀字符“✂”（ ✂ ），我想显示指向左侧，而不是右侧。
你可以使用CSS转换来实现这一点。 水平翻转会涉及缩放div像这样：
-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：
-moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1);
-moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1);
这两个参数是X轴和Y轴，-1将是一面镜子，但是您可以缩放到任意大小以满足您的需要。 上下颠倒是(-1, -1) 。
如果您对2011年的跨浏览器支持的最佳select感兴趣，请参阅我以前的答案 。
真镜：
.mirror { display: block; -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: matrix(-1, 0, 0, 1, 0, 0); transform: matrix(-1, 0, 0, 1, 0, 0); }
我通过search互联网来拼凑这个解决scheme
- 堆栈溢出答案，
- MSDN文章，
- http://css-tricks.com/almanac/properties/t/transform/ ，
- http://caniuse.com/#search=transform ，
- http://browserhacks.com/ ，和
- http://www.useragentman.com/IETransformsTranslator/ 。
这个解决scheme似乎可以在包括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); }
为了跨浏览器的兼容性创build这个类
.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>
得到左边的句柄的search图标
你可以使用“变换”来实现这一点。 http://jsfiddle.net/aRcQ8/
CSS：
-moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);
你也可以用户
.your-class{ position:absolute; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; }
要么
.your-class{ position:absolute; transform: rotate(360deg) scaleX(-1); }
注意将position设置为absolute是非常重要的！ 如果你不设置它，你需要设置display: inline-block;
还有一个真正的镜子rotateY ：
transform: rotateY(180deg);
这也许更加清楚和可以理解。
编辑：似乎没有在Opera上工作，但可悲的是。 但它在Firefox上正常工作。 我猜这可能需要隐含地说，我们正在做一些translate3d ？ 或类似的东西。
这对于<span class="navigation-pipe">></span>
display:inline-block; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
只需要显示：内嵌块或旋转块。 所以基本上第一个答案是好的。 但-180没有工作。
只需添加一个水平和垂直镜像翻转的工作演示。
.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>
再举一个例子，angular色可以被翻转。 如果你需要添加供应商前缀，但现在所有的现代浏览器都支持前缀变换属性。 如果启用了Opera Mini模式（〜3％的全球用户），唯一的例外是Opera。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Text rotation</title> <style type="text/css" media="screen"> .scissors { display: inline-block; font-size: 50px; color: red; } .original { color: initial; } .flipped { transform: rotateZ(180deg); } .upward { transform: rotateZ(-90deg); } .downward { transform: rotateZ(90deg); } </style> </head> <body> <ul> <li>Original: <span class="scissors original">✂</span></li> <li>Flipped: <span class="scissors flipped">✂</span></li> <li>Upward: <span class="scissors upward">✂</span></li> <li>Downward: <span class="scissors downward">✂</span></li> </ul> </body> </html>
你可以尝试盒子reflection
box-reflect: 20px right;
看CSS属性框 – 反映兼容性？ 更多细节
