CSS下镜像翻转（水平/垂直翻转）

css下镜像翻转两种写法：

利用css动画属性rotate旋转来实现：
/* 方法一 */
        .mirrorRotateLevel {
            transform: rotateY(180deg);   /* 水平镜像翻转 */
        .mirrorRotateVertical {
            transform: rotateX(180deg);   /* 垂直镜像翻转 */
image.gif
此处，rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转，也即水平翻转；同理，  rotateX(180deg) 表示以X轴为镜像翻转，即垂直翻转。
各个浏览器对镜像翻转的兼容写法来实现：
/* 方法二 */
        .mirrorRotateLevel {          /* 水平镜像翻转 */
            -moz-transform:scaleX(-1);
            -webkit-transform:scaleX(-1);
            -o-transform:scaleX(-1);
            transform:scaleX(-1);
            /*兼容IE*/
            filter:FlipH;
        .mirrorRotateVertical {        /* 垂直镜像翻转 */
            -moz-transform:scaleY(-1);
            -webkit-transform:scaleY(-1);
            -o-transform:scaleY(-1);
            transform:scaleY(-1);
            /*兼容IE*/
            filter:FlipV;
     <p>测试CSS3下镜像翻转</p>
     <p class="mirrorRotateLevel">测试CSS3下水平镜像翻转</p>
     <p class="mirrorRotateVertical">测试CSS3下垂直镜像翻转</p>