是否可以使用CSS/CSS3来镜像文本?
具体地说，我有这个剪刀字符“偏左”(✂)，我想让它指向左边而不是右边。
你可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-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年跨浏览器支持的最佳选项感兴趣，请参阅我以前的回答。
您可以使用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);
演示:
Span{显示:inline-block;保证金:1 em;｝ .flip_H{转换:规模(- 1,1);颜色:红色;｝ .flip_V{转换:规模(1，-1);颜色:绿色;｝ <span class='flip_H'>演示文本✂ <span class='flip_V'>演示文本✂
真正的镜子:
.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'>镜像文本
还有一个真正镜像的rotateY:
transform: rotateY(180deg);
这一点或许更清楚，也更容易理解。
编辑:似乎在Opera上不起作用……遗憾的是。但它在Firefox上运行良好。我猜这可能需要隐含地说我们正在做某种翻译3d ?或者类似的东西。
我在网上搜罗了包括
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);
}
为了跨浏览器兼容，创建这个类
.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>
以获得左侧有手柄的搜索图标
<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>
再举一个角色如何翻转的例子。如果需要，可以添加厂商前缀，但目前所有现代浏览器都支持无前缀转换属性。唯一的例外是启用了Opera Mini模式的Opera(约3%的全球用户)。
<!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>
你可以使用
.your-class{
position:absolute;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
or
.your-class{
position:absolute;
transform: rotate(360deg) scaleX(-1);
}
注意，将位置设置为绝对是非常重要的!如果你不设置它，你需要设置display: inline-block;
这适用于's7 stroke icons'和'font-awesome'这样的字体图标:
.mirror {
display: inline-block;
transform: scaleX(-1);
}
然后在目标元素上:
<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>
我们可以使用非常少的代码，使用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 >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
