纯CSS实现文字旋转180度颠倒显示(文字颠倒/伪倒影)

此代码仅供参考

---

代码说明

做网页文字颠倒显示，垂直上下颠倒，代码兼容全系列浏览，兼容IE/火狐、Safari和Opera等。下面是两个示例，第一个是旋转180度效果，第二个是在第一个基础上改成文字伪倒影效果(仅仅是旋转而成)。

---

html代码(翻转效果)

<style type="text/css"> .txtUpsideDown{ font-size:1.3em; color:blue; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */ ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */ -moz-transform: rotate(-180deg); /* 火狐3.5+ */ -o-transform: rotate(-180deg); /* Opera 10.5 */ -webkit-transform: rotate(-180deg); /* Safari 3.1+, Chrome */ } </style> <div class="txtUpsideDown">tzs小客站</div>

---

代码演示

---

html代码(倒影效果)

<style type="text/css"> .daoying{ font-size:1.3em; color:green; text-align:center; } .txtUpsideDown{ color:#090; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */ ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */ -moz-transform: rotate(-180deg); /* 火狐3.5+ */ -o-transform: rotate(-180deg); /* Opera 10.5 */ -webkit-transform: rotate(-180deg); /* Safari 3.1+, Chrome */ } </style> <div class="daoying">tzs小客站</div> <div class="txtUpsideDown daoying">站客小szt</div>

---

代码演示

---

---