当前位置:
  1. 首页 »
  2. 教程 »
  3. 正文

CSS transform位移属性的小技巧

零分 2,825

transform,大多时候都是用来做层旋转,其实很多时候也可以用来垂直和水平的位移,比如要写图片居中,习惯性的定义父层的text-align:center;有时候对于图片,不是很好用,图文混合,文字需要居左对齐,图片需要居中对齐,这个时候可以配合transform:translateX(-50%);来实现图片居中

在第二个图片上,添加了一个transform类,CSS如下

.transform{
	margin-left:50%;
	transform:translateX(-50%);
}

所以,在配合居中上,就可以很好的使用!

标签:

css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时,暂时用旋转减少抖动

在使用css3 transform:scale(1.2)时遇到一个问题,就是发现文本会抖动。大概就时文本会先变模糊、再变清晰。 经过测试,可以通过旋转来减少抖动的感觉。添加了rotate(0.1deg)后,文本变模糊,但不会再变回清晰。 我使用的场景,鼠标经过时,li放大一些以区分其他列表上的li。 CSS: transform: scale(1) translateZ(0) rotate(0deg);//鼠标未经过 transform: scale(1.01) translateZ(0) rotate(0.1deg);//鼠标经过 /***动画时间***/ -webkit-transit
笔记 2,152

wordpress博客主题Eson.X.Blog V6.0.0设置教程

图标设置 亮色模式Logo设置/暗色模式Logo设置:建议尺寸:220X60 favicon设置:格式建议png,浏览器的网站图标。 头像设置:展示位置,侧栏 微信二维码设置、QQ二维码设置、公众号二维码设置,鼠标经过微信号等弹出。 基础设置 昵称设置、微信号设置、QQ号设置、邮箱设置、公众号设置、个人介绍设置、建站日期设置。侧栏第一模块展示。 发布时间设置:开启后,文章发布部分会显示:1天前、1周前、1年前等。 阅读千单位显示:开启后,阅读量显示千位分隔符 阅读万+显示:开启后,阅读大于1万时显示1万+,2万+等 阅读基数:发布文章时显示的基础阅读数,100,200,300,time,选择t
教程 1,229

iPhone11 iOS17.4.1移植电芯后亲测校准电池健康寿命

以往通过爱思勾选修复电池来校准iPhone11电池健康在iOS17.4.1已经行不通了。 以往通过爱思一键刷机,到31%拔掉数据线,之后重新刷机来校准电池健康,在iOS17.4.1也已经行不通了。 iOS17.4.1校准电池健康可行方法: 用爱思的iTunes,常规快速刷机来校准电池健康。 1、下载固件,选择爱思的iTunes,常规快速刷机 2、在刷机进度条到了26%的时候,拔掉数据线 这里好像有多个26%,如解压进度等,拔掉数据线的26%是,当看到正在更新S3E固件时,准备拔掉数据线,因为这个时候,不出意外的话,应该是24%的时候提示正在更新S3E固件! 然后重新插入数据线,重新刷机,等待刷
教程 3,661

Windows ISO光盘镜像文件下载方法

打开Windows官网:www.microsoft.com/zh-cn/ 下拉到底部,进入下载中心,直连地址:https://www.microsoft.com/zh-cn/download 进入Windows,选择下面需要下载的镜像,目前官网提供Windows11、Windows10和Windows8.1下载,选择一个,进入下载页面,直连地址 Windows11:www.microsoft.com/zh-cn/software-download/windows11 Windows10:www.microsoft.com/zh-cn/software-download/windows10 Wi
教程 2,579

wordpress插件开发 添加设置选项

在开发插件是,需要有设置选项,对一些参数进行设置。 百度了很多(不知道为什么,现在有用的资源都不好找到了) 很多以前的博客网站也都不更新了,有的资源也基本都是收费,且不说费用多少,在获得资源之前,也不知道是不是自己需要的资源,对于很多代码,接口,API等也只能是通过一些片段来测试,研究,组合,最后拼凑出自己需要的,完整的来! 在插件里添加设置链接 add_filter('plugin_action_links', 'add_Lf_Password_Access_css_link', 10, 2 ); function add_Lf_Password_Access_css_link($links
教程 2,511