CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

wcssdu

2019-07-01

关注关注

很多人都知道CSS中添加transform:translate3d(0,0,0)能起到一个GPU加速的效果，让动画更流畅。
但是这也带来了副作用。

1、文字模糊？

下面是使用了transform:translate3d后，很明显的出现了文字模糊，看起来很不舒服；
CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

2、快速修复bug

先不问底层是如何造成的，我们先来修复一下这个问题，只要我把里面带小数的参数改成整数的，那么这个问题马上解决，下图很清晰了
CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

3、微软Edge浏览器没问题

CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

4、为什么？

我猜想这是和Chrome用的渲染引擎的工作方式有关，具体为什么，有空再详细研究吧。//TODO

transform translate3d segmentfault css

wcssdu

0 关注 0 粉丝 0 动态

关注关注

怎么让Chrome支持小于12px 的文字？

往往设计师回来找我们，这个字体能小一些吗？其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？针对谷歌浏览器内核，加webkit前缀，用transform:scale

sunshineboyleng 2020-07-08

CSS通过text-transform实现大写、小写和首字母大写转换

再日常项目中可能会用到一些特殊的样式，比如大写字母转小写、小写字母转大写、首字母大写等。none带有小写字母和大写字母的标准的文本。inherit从父元素继承。

impress 2020-05-11

CSS变形、动画实现的旋转魔方

<!DOCTYPE html>. height: 100vh;width: 100vw;/* background-image: url(../img/rubick.jpeg); */. margin: 0;paddin

yaodilu 2020-04-30

bootstrap div垂直居中+水平居中保持响应式

/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->

Phoebe的学习天地 2020-04-14

css 变形（transform）

<!DOCTYPE html>. width: 200px;height: 200px;background-color: #bfa;transition: all .2s;transform: translateX(50%);width: 2

福叔 2020-04-11

2D and 3D

translate值是从左边元素移动50个像素，并从顶部移动100像素。transform:skew;分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。transform:matrix; matrix 方法有六个

zjuwangleicn 2020-03-08

CSS3动画属性有哪些

在平面内进行旋转：transform:rotate value值是以角度为单位，例如30deg.vlaue值1：绕着X轴旋转的角度，value值2：绕着Y轴旋转的角度。参数的设置是逆时针为正值，顺时针为负值。在平面内进行缩放：tansform:scale

冰蝶 2020-03-01

css3的动画属性

　　　　检索或设置对象中的参与过渡的属性。　　　　transition:属性值1 属性值2 属性值3 属性值4；　　　　　　能支持过渡的属性都会被选中进行过渡变换。　　　　属性值4：动画的类型（匀速/linear 匀加速匀减速先加速后减速贝塞尔曲线

somboy 2020-02-29

5.5 CSS3 transform变换

1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate 设置盒子旋转4、skew 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设

zengni 2020-02-23

CSS3 制作立方体（个人疑惑点解读）

#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;#box ul li{ width:100%; height: 100%; position: absol

wangjie 2020-02-22

不使用字体图标和图片，只使用css如何做出展开收起的效果

transition: background 0.3s cubic-bezier, transform 0.3s cubic-bezier, top 0.3s cubic-bezier;

tianzyc 2020-02-19

css 纯css轮播图示例

<canvas id = "canvasId" width = 500 height = 500></canvas>. <script type = "text/javascript"

冰蝶 2020-02-16

有关css编写文字动态下划线

background-color:#000; //这里颜色可以自己设定，也可以设置继承和文字一样的颜色。transform-origin:left bottom; //这个属性必须要在transform之后，他定义的是一个基点，具体的需要自己百度去看一看

lanzhusiyu 2020-02-03

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动、缩放、旋转、倾斜。transform: translate; /* 水平向右移动50px 和垂直向下移动60px*/. Px为负值,那就变成向左或者向上。说明 scale默认值为1,

lanzhusiyu 2020-01-12

CSS3(3)---2D变形(transform)

MaureenChen 2020-01-01

好吧，CSS3 3D transform变换，不过如此！

早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！最近折腾iP

jiedinghui 2019-12-27

css样式书写顺序

css3中新增属性：content box-shadow border-radius animation transform……

wangjie 2019-12-24

css应用视觉设计

HTML元素的背景色并不局限于单色。css还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：。第一个参数指定了颜色过渡的方向-它的值是角度，90deg代表垂直渐变，45deg的

zhanghao 2019-12-20

研究一个动画相册送给女朋友吧

margin:0;padding:0;max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-a

bertzhang 2019-12-14

css学习4

{transform:skew;} 在x轴和y轴分别倾斜度数，元素在X轴和Y轴上倾斜20度30度，注意，前面是y轴。{transform:matrix;} 6个参数，分别是旋转，缩放，移动和倾斜。利用matrix()方法旋转div元素30°。平移只有跟e和

impress 2019-12-13

安科网

CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

wcssdu

1、文字模糊？

2、快速修复bug

3、微软Edge浏览器没问题

4、为什么？

wcssdu

相关推荐

怎么让Chrome支持小于12px 的文字？

CSS通过text-transform实现大写、小写和首字母大写转换

CSS变形、动画实现的旋转魔方

bootstrap div垂直居中+水平居中保持响应式

css 变形（transform）

2D and 3D

CSS3动画属性有哪些

css3的动画属性

5.5 CSS3 transform变换

CSS3 制作立方体（个人疑惑点解读）

不使用字体图标和图片，只使用css如何做出展开收起的效果

css 纯css轮播图示例

有关css编写文字动态下划线

CSS3(3)---2D变形(transform)

CSS3(3)---2D变形(transform)

好吧，CSS3 3D transform变换，不过如此！

css样式书写顺序

css应用视觉设计

研究一个动画相册送给女朋友吧

css学习4

wcssdu