镜像css3,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;

}

image.gif

注意：镜像翻转和普通旋转不同，镜像翻转以轴为镜像，普通旋转以点为镜像。

HTML部分代码：

测试CSS3下镜像翻转

测试CSS3下水平镜像翻转

测试CSS3下垂直镜像翻转

image.gif

最终效果图(本次demo用于简单说明，仅测试了翻转文字，也可尝试图片镜像翻转)：

image

image.gif

第一行为正常效果

第二行为水平镜像翻转效果

第三行为垂直镜像翻转效果

镜像css3,CSS下镜像翻转（水平/垂直翻转）相关推荐

CSS下镜像翻转（水平/垂直翻转）
css下镜像翻转两种写法: 利用css动画属性rotate旋转来实现: .mirrorRotateLevel {transform: rotateY(180deg); /* 水平镜像翻转 */ } . ...
使用Python、OpenCV翻转图像（水平、垂直、水平垂直翻转）
使用Python.OpenCV翻转图像(水平.垂直.水平垂直翻转) 1. 效果图 2. 源码参考这篇博客将介绍如何使用Python.OpenCV翻转图像,类似于cv2.rotate(). 沿y轴水 ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
html水平镜像和垂直镜像,css实现镜像翻转的方法有哪些
css实现镜像翻转的方法有哪些发布时间:2020-06-08 18:07:43 来源:亿速云阅读:470 作者:Leah css实现镜像翻转的方法有哪些?针对这个问题,今天小编总结这篇有关css镜 ...
html水平镜像和垂直镜像,使用CSS水平/垂直翻转/镜像图像
我试图翻转图像以显示4种方式:原始(无变化),水平翻转,垂直翻转,水平+垂直翻转. 为了做到这一点,我在下面做,除了水平+垂直翻转之外,它还可以正常工作,你知道为什么它不起作用吗? .img-hor ...
如何使用Matrix对bitmap的旋转与镜像水平垂直翻转
本篇文章是对使用Matrix对bitmap的旋转与镜像水平垂直翻转进行了详细的分析介绍,需要的朋友参考下 Bitmap convert(Bitmap a, int width, int height) ...
docker 删除所有镜像_关于 Docker 镜像的操作，看完这篇就够啦 !（下）| 文末福利...
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
VsCode镜像下载（国内镜像源，高速秒下）
VsCode镜像下载(国内镜像源,高速秒下) vscode官方网站下载速度太慢,非正规网站又不太敢下,通过镜像源下载就好了. 你们不介意版本的话,下面是1.63版本的链接(直接复制下载就好了): ht ...
linux镜像目录,挂载iso镜像到mnt目录下
挂载iso镜像到mnt目录下首先rz iso 系统镜像到/root 下[root@localhost ~]# lsanaconda-ks.cfg CentOS-7-x86_64-DVD-1611. ...
Scrcpy v1.9可以在屏幕关闭的情况下镜像屏幕
微软的Windows 10 Insider Build在移动集成方面取得了长足的进步.将您的手机应用程序正变得越来越丰富的功能,现在支持通知同步通过Wi-Fi无线和移动数据.您的手机还支持屏幕镜像,尽 ...

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

镜像css3,CSS下镜像翻转（水平/垂直翻转）相关推荐

最新文章

热门文章