JS文字旋转180度（难得很，网络没一个理想的方法）

在网络中搜索利用CSS进行文字顺时针旋转180度
很多都是使用：progid:DXImageTransform.Microsoft.BasicImage(Rotation=2)
通过这种方法的确是可以实现文字倒立但是产生一个很严重的后果就是倒立后的文字会产生变形和拖尾现像
文字变得很不清楚请教各位高手有没有什么好办法即可以实现文字倒立又不至于产生变形不清晰

解决方案 »

  1.   

    <div style="writing-mode:tb-rl;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)">阿</div>
      

  2.   

    IE ONLY：
    <div style='position:absolute;left:100px;top:100px;filter:flipv'>JS文字旋转180度</div>
    <div style='position:absolute;left:100px;top:200px;filter:fliph'>JS文字旋转180度</div>
      

  3.   

    photoshop or flash
    并不是所有的东西都适合用js做
      

  4.   

    模拟线性切割方式就可以了首先文字放在一个快中 然后外面在套一个块 作为显示容器块 这样就获取了文字占用块的信息（高度，宽度等等） 作为一个源快如下
    <div>
        <div>KK</div>
    </div>
    然后要实现 180度倒转 就将上面的内容 复制和高度等值的数量
    把每个块外面的容器块 限制在1PX的高度（注意容器块 不要有 边框 padding）
    然后把所有复制的 块按顺序叠放 同时容器块内 根据叠放的现实顺序 偏移里面的内容块
    比如一共 25个1px按次须叠放的块 
    则第一个块里面的内容块margin-top：0
    第2个块里面的内容块margin-top:-1
    ...
    第25个块里面的内容margin-top:-24
    这样你就有了 这个文本块 的模拟线性切割 每个线块正好显示源块的相应位置的线内容
    剩余就是把 这样 25个块 交换下叠放顺序
    第一个和 第25个交换 第2个和第24个交换类推交换好 就是 倒影了
    按照以上原理 改变下内容的偏移 线的数量 就可以变化出更多的倒影效果
    然后横向倒影也是一个原理
      

  5.   

    为了一个字要载入多少个div啊
      

  6.   

    <html>
    <head> <style type="text/css">
    .transformFont {
    width:80px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    }
    </style>
    </head>
    <body>
    <div class="transformFont">给点钱吧</div>
    </body>
    </html>
    全浏览器兼容
      

  7.   

    在IE上的效果可能不理想，但是在FF,苹果谷歌的Webkit引擎下几乎是完美
      

  8.   

    楼上的牛B，不过经我测试 Opera 不支持
    版本Opera 10.60 Beta
      

  9.   

    <html>
    <head>    <style type="text/css">
            .transformFont {
                width:80px;
                transform: rotate(180deg);
                -o-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
            }
        </style>
    </head>
    <body>
        <div class="transformFont">给点钱吧</div>
    </body>
    </html>那再加一行
      

  10.   

    等Html5成为事实上的标准的时候，也就是IE9替代现在IE6的时候，这事就好办了。
      

  11.   


    js画图都这样弄的，画圆角同理，非要用js做，估计只能这样做