css实现镜像翻转的方法有哪些

css实现镜像翻转的方法有哪些?针对这个问题,今天小编总结这篇有关css镜像翻转的文章,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。

创新互联专业为企业提供义县网站建设、义县做网站、义县网站设计、义县网站制作等企业网站建设、网页设计与制作、义县企业网站模板建站服务,10多年义县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

要实现镜像翻转,有两种实现方法:

方法一:利用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部分代码:

测试CSS3下镜像翻转

测试CSS3下水平镜像翻转

测试CSS3下垂直镜像翻转

我们来看一下简单的效果:

(感兴趣的同学可以将文字换成图片)

css实现镜像翻转的方法有哪些

以上就是css实现镜像翻转的方法,代码示例简单明了,如果在日常工作遇到此问题。通过这篇文章,希望你能有所收获,更多详情敬请关注创新互联行业资讯频道!


新闻名称:css实现镜像翻转的方法有哪些
分享网址:http://myzitong.com/article/pidpje.html