CSS下镜像翻转（⽔平垂直翻转）
css下镜像翻转两种写法：
利⽤css动画属性rotate旋转来实现：
/* ⽅法⼀ */
.mirrorRotateLevel {
transform: rotateY(180deg);  /* ⽔平镜像翻转 */
}
.mirrorRotateVertical {
transform: rotateX(180deg);  /* 垂直镜像翻转 */
}
此处，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;
}
注意： 镜像翻转和普通旋转不同，镜像翻转以轴为镜像，普通旋转以点为镜像。
HTML部分代码：
<div id="test">
<p>测试CSS3下镜像翻转</p>
<p class="mirrorRotateLevel">测试CSS3下⽔平镜像翻转</p>rotate属性
<p class="mirrorRotateVertical">测试CSS3下垂直镜像翻转</p>
</div>
最终效果图（本次demo⽤于简单说明，仅测试了翻转⽂字，也可尝试图⽚镜像翻转）：
第⼀⾏为正常效果
第⼆⾏为⽔平镜像翻转效果
第三⾏为垂直镜像翻转效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。