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字体显示比较: 为了看到更清楚,我们放大点显示: 放得更大些: 中文.日文等亚洲文字的 ...
随机推荐
- java正則表達式的坑
java中正則表達式比較有意思,这里列举几个常见的坑 1.[]符号,中括号表示当中的数据都是或的关系 假设[\\w+]是匹配条件 abc能否够匹配的到呢? 首先\\w(注意这里没有中括号)表示a-z ...
- 基于Office 365 无代码工作流分析-需求基本分析!
客户需求分析: 嘉昊信息是一家IT创业型公司,因为公司初创,有较多的招聘员工的需求,公司近期购买了Office 365,因为招聘工作繁琐,HR人员须要做非常多反复繁琐工作,HR主管提议开发一个招 ...
- VirtualBox安装ubuntu14.04和文件共享
因为机器的VMware使用很卡,占用更多的内存,所以我想,以取代VirtualBox.已安装ubuntu14.04使用与VMware在相同的. VirtualBox下载链接:https://www.v ...
- 通达OA 新旧两种数据库连接方式
老的连接方式: include_once("/inc/conn.php"); $cursor = exequery($connection,$query); 新的连接方式: inc ...
- VB6.0“挑衅”.NET!
来到与两年前接触VB,现在学习VB.NET,这两个看起来真的不得不说,这是相对的似(ps:一分之差,只有三个字母),计等.但他们有又什么不同呢?都说VB.NET高级,比VB究竟高级在哪里了?是不是VB ...
- Android SQLite 数据库 增删改查操作
Android SQLite 数据库 增删改查操作 转载▼ 一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NU ...
- JAVA jdbc(数据库连接池)学习笔记(转)
学习内容: 1.JDBC的含义... JDBC想必学过JAVA的就不会陌生,JDBC到底是什么呢?其实就是由JAVA的一些类和接口构成的API,保存在java.sql和javax.sql..包中的一些 ...
- 非常不错 Hadoop 的HDFS (Hadoop集群(第8期)_HDFS初探之旅)
1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开 ...
- 【Web探索之旅】第三部分第一课:服务器
内容简介 1.第三部分第一课:服务器 2.第三部分第二课预告:IP地址和域名 第三部分第一课:服务器 大家好,欢迎来到[Web探索之旅]的第三部分.这一部分有不少原理,还是很重要的. 这一部分我们会着 ...
- Linux(Centos)中tcpdump参数用法详解(转)
在linux下进行编程开发的人尤其是网络编程的人会经常需要分析数据包,那么一定会用到tcpdump,下面就是关于tcpdump的使用方法说明(1). tcpdump的选项 -a 将网络地址 ...