在CSS中，有滤镜属性filter，可以将某一个标签内的内容按水平方向翻转或者按竖直方向翻转。
【滤镜仅在IE有效！】
基本实现如下：
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滤镜实现翻转</title>
<style type="text/css">
div{
position: absolute;
top: 100px;
left: 100px;
filter: flipV;
}
img {
position: absolute;
top: 120px;
left: 100px;
}
</style>
</head>
<body>
<h3>实现翻转</h3>
<hr>
<br>
<div style="color:blue; font-size:18px;">实现文字翻转</div>
<br>
<img src="test.jpg" style="width:100px; height:100px; filter:flipV">
<!-- 实现图片翻转 -->
</body>
</html>
另外，也可以使用翻转函数，设置翻转度数为180度，以达到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滤镜实现翻转</title>
<style type="text/css">
div{
position: absolute;
top: 100px;
left: 100px;
transform:rotate(-180deg);
}
img {
position: absolute;
0 transform: rotate(-180deg);
top: 120px;
left: 100px;
}
</style>
</head>
<body>
<h3>实现翻转</h3>
<hr>
<br>
<div style="color:blue; font-size:18px;">实现文字翻转</div>
<br>
<img src="test.jpg" style="width:100px; height:100px; filter:flipV">
<!-- 实现图片翻转 -->
</body>
</html>