您可以使用 CSS 翻转图像！可能的场景：只有一个“箭头”图形，但将其翻转以指向不同的方向。
.flip-horizontally {
transform: scaleX(-1);
}请查看此处如何使用一个箭头指向两个方向
查看 CodePen 上的示例
翻转图像，由 CSS-Tricks (@css-tricks) 创建。
在 CodePen 上。
旋转是另一种可能性，这意味着我们的一个箭头可以指向很多方向
查看 CodePen 上的示例
翻转图像，由 CSS-Tricks (@css-tricks) 创建。
在 CodePen 上。
这也可以是任何图像，或者实际上是任何元素。
查看 CodePen 上的示例
翻转图像，由 CSS-Tricks (@css-tricks) 创建。
在 CodePen 上。
旧的供应商前缀
为了后代
img {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
这可以应用于背景图像吗？如果是这样，它将非常适合按钮和阴影框等内容。
但是您可以在带有背景图像的 div 上应用它 :)
哪一行代码对应哪个浏览器？
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
但说真的，微软应该完全放弃 IE，让生活轻松一点。
谢谢！
@Pat
-o- = Opera
-moz- = Firefox/Mozilla
-webkit- = Safari、Chrome
-ms- = Microsoft，所以 IE 和 Edge
如果将其应用于精灵图像，是否也需要反转坐标？
不用。转换是在内容呈现后，作为最后一步应用的。
它不能应用于背景图像。只能应用于元素。
实际上它可以应用于背景图像……我测试过，它在以下浏览器中运行良好
- 火狐 3.6.13
- Chrome 8.0.552.237
- IE 8.0.7600
附注：在使用 IE 时，页面顶部会显示“ActiveX”信息栏，要求用户允许被阻止的内容，否则只会显示背景图像的未翻转版本……这非常烦人，可能会吓跑用户，让他们认为网站试图下载某些隐藏的脚本 :)
我还想补充一点，当您将翻转用于背景图像时，它不仅会翻转“background-image”，还会翻转其“background-position”的“X”和“Y”值，因此您也需要反转它们 :)
您是如何只翻转背景的？
但是，如果您将整个主体内容包装到一个父容器中并将图像设置为背景，则可以做到这一点。我知道这是一篇旧文章
在 RSS 阅读器中查看时，翻转的图像不会翻转 :)
我也是 ;)（Apple Mail 应用）
没错……这是因为 CSS 在演示页面上应用。RSS 阅读器会将其自己的 CSS 应用到其页面上。如果您想尝试将 CSS 强制应用到它们，则必须使用内联样式，即使这样也无法保证成功。
RSS 阅读器和邮件应用有自己解释 HTML 和 CSS 的方式，通常只支持某些代码。CSS 经常无法正常工作。如果要使用 CSS 的全部功能，则必须在现代浏览器中显示您的内容。
如何将其用于反射？垂直翻转图像并降低不透明度？可能吗？
将不透明度与 CSS3 渐变结合使用？
我的预测：可以。它将在除 IE 之外的每个浏览器中完美运行。
太可惜了，您没有给 Gijs Stegehuis 荣誉……
我需要“image-rendering: -moz-crisp-edges;”才能使 GIF 箭头在 OSX 上的 Firefox 中正常工作。没有此属性，它会渲染得非常模糊。
谢谢，我也有这个问题。
完美——终于——太棒了！这仅是 CSS3 属性吗？它的跨浏览器兼容性如何？
这对于会员网站的注销页面来说会很有用。使注销页面成为登录页面的翻转版本。或者这个想法的一些变体。也许甚至可以在登录页面上的图片在注销页面上翻转。只是一个想法。
不。
我不知道你的意思。翻转登录字段等？通常没有注销页面，您只需单击一个按钮即可注销。
这在我的 IE8 中不起作用。图像没有翻转。
此外，在 IE8 兼容模式下，图像实际上是翻转的，但是当使用 jQuery 更改 top 位置时，当我的图像“跳跃”时，图像会隐藏（我让克比在屏幕上前后奔跑，单击时跳跃）。图像仅在翻转时才会隐藏。
这实际上对于必须在从左到右和从右到左格式之间切换的国际网站来说具有良好的应用。大多数网站在为阿拉伯语和希伯来语提供适当的从右到左 UX 方面都很糟糕。
大家好，
我正在使用此 CSS 代码来翻转具有透明背景的 png 图像，并且我得到了一个糟糕的结果（在 IE 7、8 或 9 上）。
翻转后，图像会得到一种弯曲的黑色轮廓……有什么建议吗？
干杯，
如果您想要一个作为过渡翻转的图像，请参考以下方法
img { display: block; height: 400px; width: 400px; -webkit-transition: all 1s; }
img:hover { display: block; height: 400px; width: 400px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-transition: all 1s; }我们可以在动画中使用这些吗？如果是，如何使用？
抱歉
img {
display: block;
height: 图片高度;
width: 图片宽度;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
img:hover {display: block;
height: 图片高度;
width: 图片宽度;
图片翻转代码
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
已测试，有效
这真的非常棒..
如果我们将此与:after结合使用，则可能可以用来为非webkit浏览器生成纯CSS反射。
非常好……谢谢
谢谢兄弟，
我一直在搜索相同的，在谷歌搜索后，我得到的所有信息都是幻灯片放映等等，非常感谢这个技巧……
哇，很棒的文章。我用你的代码旋转背景图片，效果很好。
感谢分享这么好的文章。
我需要分割一张图片，并且它也应该重新组合在一起。或者有没有其他新的东西我们只可以使用CSS初始版本来实现？给我一些想法，伙计。
你的意思是像爆炸一样吗？
使用JavaScript（和JQuery）你可以很容易地创建一些带有图像作为背景的小块（以及每个块所在位置的background-position），然后独立移动每个块（甚至使用css转换进行旋转）以使其看起来像你想要的。
然后，将它们重新组合在一起也应该非常容易。
你明白我的意思吗？
没有JavaScript，我认为这是不可能的。我的意思是，这是一个非常特殊的情况，并且如果有一个纯CSS解决方案将是不可思议的。
哦。我的信息是给巴拉的。抱歉。
由于某种原因，我的翻转图像渲染模糊？很奇怪，但除此之外，这是一个很棒的技巧。
使用
image-rendering: -moz-crisp-edges;，正如**Gijs Stegehuis**在上面所说的。非常棒！
我们可以将水平翻转效果应用于垂直翻转的图像吗？即我们在垂直方向上应用水平翻转时得到什么。
仅在IE中，（filter: FlipH; -ms-filter: “FlipH”;）会导致黑色背景，如果（奇怪的是）父层叠div应用了css圆角元素。（在IE中，我的类='round'是-ms-border-radius:20px;）。如果您花费5个小时寻找IE中的“变黑”错误，请记住这一点。我删除了圆角类，没有黑色。奇怪。
我想知道：亚洲芥末是什么鬼东西？
谢谢伙计 - 正是我想要的！
谢谢克里斯，这真的很有用。
有用的信息。
谢谢
非常棒且有用的概念。
您好，感谢您的文章。
我正在使用它，但在Y轴上
我想知道是否可以 -以及如何- 使用滚动来实现这种效果。
我的意思是，当我向下滚动时，图像反转。
有什么想法吗？
谢谢
这是一个很好的实践，我们可以用它来翻转图像、图标，以及**图标字体**！
对于翻转背景，到目前为止，我可以翻转所有元素，而不仅仅是里面的图形，所以你不能用它来翻转背景，它也会翻转文本！
不幸的是，我们需要等待一段时间“可能是几个月，也可能是几年”才能依赖它，因为现在很多人使用**IE8**来浏览网站。
“镜像管”
粘贴任何Youtube或vimeo视频网址，你就可以看到它们水平翻转的版本（它在手机和Internet Explorer上不起作用）。
http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html
正中靶心。感谢这个技巧。
你好
最近，我更新了“Mirrortube”。
它能够以单色播放任何Youtube或Vimeo视频。
请查看一下。
MirrorTube
http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html
现在是scale(-1)
我偶然发现了这段用于箭头背景图像的代码，根据类，该代码可以使箭头指向下或向上。
FlipV适用于大多数浏览器，但它在IE9中导致了一个问题，因为箭头同时向上和向下显示，因此变成了一个正方形！
我通过简单地使用transform修复了它（尽管我随后不得不重置filter）
希望这对遇到类似问题的任何人都有帮助。
感谢发布此修复！
我已经成功地设法在点击图像时翻转它。感谢您的信息！但是如何将其翻转回来？将id值更改为“regular”不起作用。难道你不必为此也创建一个CSS样式吗？
在网站seeveeze上可以看到一个在IE中有效的翻转效果。我似乎无法发布网址，只需在谷歌中搜索seeveeze即可http://www.seeveeze.com
transform: rotateY(180deg)有什么问题？
有时您需要的不仅仅是旋转。您需要一个**镜像反射**，而翻转它就可以解决问题
这是我垂直翻转div的示例
https://uisnip.appspot.com/?share=/s/9tjc3v4b5wt6mcm/VerticalFlip-2?dl=0
谢谢！这是我在网上找到的翻转元素最简单、最轻便的方法。恭喜。
优雅的CSS片段，谢谢:)
翻转图像可能已经增加了价值，但如果上面有标题或文字，我认为很难赋予此图像任何意义。
http://www.highhdwallpapers.com/
你可以用CSS翻转图像！可能的场景：只有一个“箭头”图形，但将其翻转以指向不同的方向。
多福斯寻宝
不错的脚本。工作 - 100%！谢谢⇨✪✪✪✪✪
酷！在我的博客中100%有效（#firefox#）
这并没有翻转真实的图像？它只是显示了图像翻转到右侧？我在网上尝试了一个网站，它翻转了我的图片并上传到imgur。这很酷（http://flippicture.com/）。但我真的很想知道他们是怎么做到的？有人愿意帮我解答一下吗？
谢谢！实现起来太容易了。我用它来水平翻转一个font awesome图标，它成功了！
适用于任何元素，甚至视频。
我该如何使用它，但仅用于某些图像？使用此方法会旋转网页上的所有图像，而我只希望对某些图像生效。
嘿，Paul！尝试使用一个唯一的类而不是通用的img选择器。例如，将“img”替换为“.image-flip”之类的名称，并将该类名添加到要翻转的图像上。 :)
你可以使用：transform: rotateY(180deg);