default
menu home
图标库 注册 登录 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 1424


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

captcha
请正确填写验证码
取 消