default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像）

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-05-25 17:06(UTC)
演 示

有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。

与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。

正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。

favinavi.com的logo:

favi_logo

CSScontent_copy复制代码
.mirrorH {/*水平镜像，绕Y轴旋转180°*/
	transform: rotateY(180deg);
}
.mirrorV {/*垂直镜像，绕X轴旋转180°*/
	transform: rotateX(180deg);
}
.logo{width:100px;height:100px;margin:24px;padding:16px;border:solid 1px #666;}
htmlcontent_copy复制代码
<img src='/favicon.svg' class='logo' title='正常' />
<img src='/favicon.svg' class='logo mirrorH' title='水平镜像' />
<img src='/favicon.svg' class='logo mirrorV' title='垂直镜像'/>

visibility 3464

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消