default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-25 17:06(UTC)

Demo

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

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

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

favinavi.com的logo:

favi_logo

CSScontent_copyCopy codes
.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_copyCopy codes
<img src='/favicon.svg' class='logo' title='正常' />
<img src='/favicon.svg' class='logo mirrorH' title='水平镜像' />
<img src='/favicon.svg' class='logo mirrorV' title='垂直镜像'/>

visibility 1823


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel