元素水平翻转下的资源重用实例页面

CSS代码：

/*水平翻转*/
.flipx{
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}

.image_a{display:inline-block; position:relative;}
.image_mm{display:block; padding:5px; border:1px solid #ccc; background-color:#fff;}
.image_sha{border:0; position:absolute; bottom:-8px; right:2px;}

.box_div{width:267px; margin-top:2em;}
.box_title{height:26px; line-height:26px; padding-left:0.6em; background-color:#b92000; color:#fff; font-size:1.1em; position:relative;}
.box_sha{position:absolute; bottom:-8px; left:2px;}
.box_con{border:1px solid #ccc; padding:.8em .6em .7em; margin-top:-1px;}
                

HTML代码：

<a class="image_a" href="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg">
    <img class="image_mm" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <img class="image_sha" src="/study/image/img_shadow.png" />
</a>

<div class="box_div">
    <div class="box_title">
        我是标题<img class="box_sha flipx" src="/study/image/img_shadow.png" />
    </div>
    <div class="box_con">
        【酷6裁员发展至肢体...
    </div>
</div>