transform:translateZ() 字体模糊问题 父类重返Z轴平面
translateZ()变糊
第一种情况:
当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关,
这个 css中 只能尽量避免非整数的;js 中 用Math.floor(m)或者Math.cail(m)避免就好;
第二种问题
当设置有景深 perspective:number; 被运动元素 translateZ(m)中的 m设置 非 0 的情况下; m>0;整体背放大,距离你更近,反之,则反;(scale(m)异曲同工);不过 此时;元素被像素化;字体变模糊;
<style>
.parent{ position:relative; text-align:center; width:1000px; border:1px solid #333; margin:20px auto; height:500px;} .child{
text-align: center;
margin: 10px auto;
white-space: pre;
height:65px;
line-height:65px;position:relative;
} .font-size {
font-size: 1.8em;
} .scale {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
} .perspective {
-webkit-transform: perspective(1200px) translateZ(700px);
-moz-transform: perspective(1200px) translateZ(700px);
-o-transform: perspective(1200px) translateZ(700px);
transform: perspective(1200px) translateZ(700px);
}
</style> <div class='parent'>
<p class="child font-size">font-size: 1.8em</p>
<p class="child scale">transform: scale(1.8);</p>
<p class="child perspective">transform: perspective(1200) translateZ(700px);</p>
</div>
效果图:
解决办法
父类的元素 使用translateZ(-m);重返Z轴平面;也就是说;
.childrens{ -webkit-transform:translateZ(23px) rotateX(-90deg); }
.father{-webkit-transform:translateZ(-23px);/*父类修复子类放大问题 导致子类的文字 内容锯齿化}
在hover 时候,也加个这个;可以消除 字体模糊;
.parent:hover{-webkit-transform:translateZ(-23px) rotateX(90deg); /* rotateX 之后 再次translateZ(-23px) 父类Hover 修复子类放大问题 导致子类的文字 内容锯齿化*/}
另外一个小技巧:translateZ(m)中。m 的参数 设置最好是 元素高度(行高也行)的一半,(上面这个:translateZ(23px)就是 line-height:46px的 一半高度)因为默认的 transform-origin:center center ;
另外常见的还有一个类似的 问题 算是第三个问题吧
css3的垂直居中 有时候导致垂直元素的字体模糊,尤其pc上,宽度不定,translate自身的一半,有时候 200.1234px,出现小数位,pc浏览器就模糊了...
.center{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
附上源代码:
。。。。
http://www.cnblogs.com/surfaces/
transform:translateZ() 字体模糊问题 父类重返Z轴平面的更多相关文章
- CSS3 translate导致字体模糊
今日客户反馈,发现 使用了 translate会导致字体模糊. .media-body-box{ @media all and (min-width: 992px){ position: absolu ...
- 疑难杂症:运用 transform 导致文本模糊的现象探究
在我们的页面中,经常会出现这样的问题,一块区域内的文本或者边框,在展示的时候,变得特别的模糊,如下(数据经过脱敏处理): 正常而言,应该是这样的: emmm,可能大图不是很明显,我们取一细节对比,就非 ...
- Win10 字体模糊解决(DPI缩放禁用),设置默认输入法英文
电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...
- Qt在Linux环境下应用程序字体模糊的解决方法(先改成使用默认字体,然后使用qtconfig配置)
这两天一直在用Qt实现一个跨平台的软件.软件之前在Windows上编写的,后来放到里Ubuntu 10.10下编译.程序运行时遇到一个很棘手的问题,界面文本非常模糊.后来在网上查阅了好几天的资料,经历 ...
- WPF字体模糊解决方案
原文:WPF字体模糊解决方案 WPF对字体渲染做了很大的改善,与Winform窗体字体相比较,更加平滑,但是当字体大小较小时,则会出现字体模糊的现象.可通过以下方法进行改善处理: 对于XAML用户界面 ...
- Ubuntu 10.04 安装Qt4.8.1 源码后字体模糊的问题
Ubuntu 10.04 安装QT4.8.1 源码后字体模糊的问题. 附加解决 QT SDK 4.8.1 链接失败的问题 Ubuntu 10.04 编译QT源码后,编译程序,运行后IPA字体无法正常显 ...
- Manjaro安装配置美化字体模糊发虚解决记录
Manjaro安装记录 前言: 记录自己Manjaro18安装的一些坑,避免下次满互联网找解决方法.在此之前试过Manjaro.Ubuntu.Fedora.linux Mint系统的pac.yum ...
- Wpf的布局舍入属性(可以解决软件字体模糊的问题)
原文:Wpf的布局舍入属性(可以解决软件字体模糊的问题) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HK_JY/article/details/ ...
- WPF下字体模糊的问题
原文:WPF下字体模糊的问题 一直以来,发现WPF中的小字体下的文字变得比较模糊,比如: WPF与Winform字体显示比较: 为了看到更清楚,我们放大点显示: 放得更大些: 中文.日文等亚洲文字的 ...
随机推荐
- javascript - 浏览TOM大叔博客的学习笔记
part1 ---------------------------------------------------------------------------------------------- ...
- BZOJ 1449 JSOI2009 球队收益 费用流
题目大意:给定nn支球队.第ii支球队已经赢了winiwin_i场.输了loseilose_i场,接下来还有mm场比赛.每一个球队终于的收益为Ci∗x2i+Di∗y2iC_i*x_i^2+D_i*y_ ...
- JavaScript实现的购物车效果-效果好友列表
JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...
- sql server 远程
资讯 | 安全 | 论坛 | 下载 | 读书 | 程序开发 | 数据库 | 系统 | 网络 | 电子书 | 站长学院 | 源码 | QQ | 专栏 | 考试 | 手册 | ...
- 【原创】leetCodeOj --- Min Stack 解题报告
题目地址: https://oj.leetcode.com/problems/min-stack/ 题目内容: Design a stack that supports push, pop, top, ...
- zoj 3288 Domination (可能dp)
///dp[i][j][k]代表i行j列件,并把一k的概率 ///dp[i][j][k]一种常见的方法有四种传输 ///1:dp[i-1][j][k-1] 可能 (n-(i-1))*j/(n*m-(k ...
- Docker镜像与容器命令(转)
Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...
- 达到J2EE在后台action控制接待javascript弹出的对话框
1.后台Action于: request.setAttribute("message", "这项username要么password错误,请重新输入!"); 2 ...
- BZOJ 1324 Exca神剑 最小割
标题效果:给定一个n*m矩阵.所有的格宝石之子,人们可选择起始位置,后除去宝石的当前位置的周围消失,然后你就可以走两步,重复上述过程 easy发现格儿子把它周围格孩子不能拿 因此,党格访问问题 黑白染 ...
- JDBC连接数据库 prepareStatement
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...