下面这段代码是如何实现字体倒立的:不太理解，请高手解释一下。
<style>
body{font-size:19px;font-family:宋体}
#aa{position:relative;width:168px;height:18px}
</style>
<script language="javascript">
function aab(){
tat=document.getElementById("aa").innerHTML
aaa=""
ja=""
for(i=19,a=20;i<58;i++,a--){
ja+="<div style='overflow:hidden;width:168px;height:1px;'><p style='background-color:red;margin:-"+(18-(i-18))+"px 0px 0px 0px'>"+tat+"</p></div>"
}aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa">号<div>
</body>JavaScriptCSS
<style>
body{font-size:19px;font-family:宋体}
#aa{position:relative;width:168px;height:18px}
</style>
<script language="javascript">
function aab(){
tat=document.getElementById("aa").innerHTML
aaa=""
ja=""
for(i=19,a=20;i<58;i++,a--){
ja+="<div style='overflow:hidden;width:168px;height:1px;'><p style='background-color:red;margin:-"+(18-(i-18))+"px 0px 0px 0px'>"+tat+"</p></div>"
}aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa">号<div>
</body>JavaScriptCSS
那么露出来的1px就是最上面那条横杠，如果设置margin-top:-5px;(或者-6，不太精确)，露出来的就是第二条横杠。说一下他的原理就是，计算字体高度，比如height是18px，就1个px创建一个层，这个层中只放那个字，也就是说模拟出这个18px的字倒立的效果，需要18个div，每个里面内容都相同，每个高度为1px。然后找一个元素设置为margin-top:-17px;
那么它最终显示的是字体最下面的部分，然后依次-16px、-15px直到0，就通过18个像素把一个字的各个部分拼在了一起，你把负值换成正的，就能看到字又“正过来了”。
每个div高度1px 分别显示18px中的一个像素 用margin来进行偏移
这样等于有了 18的像素线然后你可以 自己拼 随便换次序 18个到过来排在加上透明度设置 就倒影