All tags

自用小工具：正则表达式测试是否能匹配字符串
现在还有哪些好用的网络收藏夹？
无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? Ubuntu 22.04 live server更换亚马逊AWS的更新源发现一只有趣的蜘蛛——“BSbot” 如何获得高质量网站的外部链接把favinavi网络收藏夹的书签搜索功能做到最好 favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比 What should the best web favorites look like? 我的酱香之路一个使用CSS/HTML将图像自适应屏幕的示例 More...
CSS

CSS背景图片分割之大图小用无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 使用CSS让大背景图片适应不同大小屏幕又一例一个使用CSS/HTML将图像自适应屏幕的示例网页图片CSS进阶篇——优化图片，提升网页加载速度 CSS学习笔记：flex布局做出元素两端对齐效果 CSS学习心得：多行文本两端对齐，同时溢出部分自动截断并添加省略号... MDUI前端框架，表格头position: sticky无效的问题几种CSS字体描边和阴影效果 CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏 More...
HTML

了解onenav 无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 关于网页上的复选框checkbox的checked和value的问题使用CSS让大背景图片适应不同大小屏幕又一例一个使用CSS/HTML将图像自适应屏幕的示例 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式 HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法 css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像） CSS实现倾斜绶带式45°标签 More...
javascript

javascript捕获缺省的组合快捷键，比如CTRL+F 关于网页上的复选框checkbox的checked和value的问题自用小工具：正则表达式测试是否能匹配字符串 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 php/javascript的一些关于时间处理的函数更全面匹配UTF-8中文汉字的正则表达式 https协议下javascript复制内容到剪贴板
PHP/Other

我的酱香之路 A PHP method for determining whether a browser supports AVIF images php判断浏览器是否支持avif格式图片的一种方法统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法网站的页面访问量以及搜索引擎爬虫访问量的统计方法网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训 Apache2网站安装开通https协议SSL证书 php/javascript的一些关于时间处理的函数更全面匹配UTF-8中文汉字的正则表达式 Ubuntu 22.04 live server更换亚马逊AWS的更新源 More...
IT

家用服务器proxmox 7.3开启samba共享目录你的网站会有不请自来的访客吗？网站开发测试环境启用https，使用自签发ssl证书不是个好主意搭建家庭用服务器全套攻略，300元一台小主机全部搞定 mysql8开启主从同步注意事项，否则会动不动就出错停止使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题 Applebot是什么？ win11安装跳过TPM2.0和安全启动检查的方法网络收藏夹的正确打开方式是怎样的？ favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕 More...

Online notes favinavi - online bookmark

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

Tags： All CSS html javascript php/other IT

by: fanshome 2023-05-25 17:06(UTC)

Demo

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

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

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

favinavi.com的logo:

CSSCopy 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;}

htmlCopy codes

<img src='/favicon.svg' class='logo' title='正常' />
<img src='/favicon.svg' class='logo mirrorH' title='水平镜像' />
<img src='/favicon.svg' class='logo mirrorV' title='垂直镜像'/>

3463

favinavi - for heavy web user Online notes

Comparing the mobile adaptability of several Chinese web favorites
In the era of mobile phones, a website is still good to use, and whether you can...
An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
了解onenav
https://blog.xiaoz.org/archives/16772
现在还有哪些好用的网络收藏夹？
看到几年前有人问过这个问题，上网搜索一下，大概能找到以下几家，目前貌似都还能访问： 1、当然有这里—— favii人性化网络收藏夹，不过最近favii升级新版...
CSS学习笔记：flex布局做出元素两端对齐效果
很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用fl...

Post a comment