为什么要用translate3d（为了视觉需要，但是会影响css性能）

最新推荐文章于 2024-10-08 18:21:13 发布
转载 最新推荐文章于 2024-10-08 18:21:13 发布 · 2.5k 阅读 · 1
本文探讨了使用CSS3的transform3D属性导致元素显示模糊的原因。当使用3D变换时，浏览器会利用GPU加速来提高动画性能，但此过程仅传递元素图像到GPU，不涉及内容的重新渲染，可能导致图像清晰度下降。

使用了 css3 translate3d 会导致显示模糊？

元素显示模糊主要是因为使用了transform 3D变换,3D变换会开启GPU加速，GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容，图像清晰度不能保证，元素显示清晰度自然就下降了。


http://blog.codingplayboy.com/2016/11/27/css3_transform/

melody_day
关注
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决 如： transform:translate(-50%); 换成： transform: translate(calc(-50% + 1px)); clac是css3
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 6424
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
CSS函数: translate、translate3d的使用
胖蔡叨叨叨
06-05 2934
和函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。
CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
m0_61547956的博客
04-08 8057
1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。 根据近大远小，物体遮挡后面看不见的原理。 透视写在被观察元素的父盒子上，透视越小
32.三维转换属性
potato123232的博客
04-07 1576
三维在网页中显示出来有两个特点 近大远小 被遮挡后不可见 三维转换有四个常用属性，3D位移(translate3d)，3D旋转(rotate3d)，透视(perspective)，3D呈现(transfrom-style) 与二维转换相同，由于转换的属性名都为transform，所以无论写多少transform只有最后的语句生效，写一个二维的再写一个三维的，也是只有最后的语句生效 目录 1三维坐标系 2透视 perspective 3三维移动 translate3d 4三维旋........
CSS-transform【下】(3D转换)【看这一篇就够了！！！】
zheshiyangyang的博客
09-06 2532
位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)x,y 的值为单位长度，可以是 px、百分比z 的值只能为 px 长度单位。translate(x) 同等于 translate(x,0);缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()x,y 的值为数字，分别表示宽度和长度的缩放比例scale(x) 表示 y 的值和 x 一样大，实现等比缩放。
HTML5CSS3（translate3d）
illion booked
05-27 1382
cHTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 tran
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
lixiaosenlin的专栏
09-21 1万+
前面我们已经介绍过了2D转换，那么我们即将学习的3D转换又是什么呢，它跟2D转换有什么不同呢？ 在我们日常生活的环境就是3D的，我们多看到的物体也都是3D的，而我们拍的照片就是3D物体在2D平面中呈现的样子 。 3D的特点 近大远小（离我们眼睛越近看上去越大，而离眼睛越远则看上去越小） 物体后面遮挡不可见 根据这些特点我们就可以在网页上模拟构建出3D效果。 三维坐标系 我们前面讲过的2D是一个平面坐标系，而3D则是三维坐标系。三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴.
CSS 3D转换
最新发布
2401_82561004的博客
10-08 2013
在 CSS 中，除了可以对页面中的元素进行外，您也可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。
学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例
GoldenaArcher的博客
05-21 740
学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例 3D 转换是之前学的 CSS 2D Transform 的进阶，顾名思义，即物体看起来并非在平面上产生形变，而是在空间中进行位置改变。 笔记内容不是很长，所以学习笔记和学习案例整合在一起了。上半部分是学习笔记，一些基础的语法，第二大部分是学习案例，一些应用。 学习案例包括以下几个： perspective 的重要性 xyz 三轴的旋转 怎样使得元素在三维空间中旋转 三维空间转换的两个案例 综合案例 笔记 三维坐标系 x 轴 右正
translate3d(x,y,z)的用法
热门推荐
徐同保的专栏
02-23 3万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minim...
transform 平面转换（3d）
qq_50260510的博客
03-13 2990
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.transform: translateX(值);3.transform: translateY(值);4.transform: translateZ(值);1.正负均可2.像素单位数值3.百分比。
css中translate3d的使用
m0_59006402的博客
07-19 2973
tranform: translate3d(x,y,z) 这三个参数代表的含义: transform: translateX(100px) 仅在x轴上移动 transform: translateY(100px) 仅在y轴上移动 transform: translateZ(100px) 仅在z轴上移动 transform: translate3d(x,y,z) xyz分别代表要移动的轴的方向的距离 这个动画是从下往上的,代码如下: transform: ...
CSS基础：新属性3D的转换，以及案例演示
u011863822的博客
03-23 2049
CSS3新特性之3D转换，以及透视，3D呈现 transfrom-style
【CSS】3D转换
m0_62827829的博客
10-13 227
【CSS】3D转换
3D移动 translate3d
m0_49471668的博客
06-27 851
3D转换我们主要学习工作中最常用的3D位移和3D旋转 主要知识点3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。translform: translateX(100px):仅仅是在x轴上移动 translform: translateY(100px):仅仅是在Y轴上移动 translform: translateZ(100px):仅仅是在Z轴上移动(注意： translateZ一般用px作单位) transform: translate3d(x,y,z):其中x、y、z分别指要移动的
一文掌握 CSS3 transform 3D转换（附代码示例）
weixin_40348267的博客
05-13 1647
CSS3中的 transform 属性不仅支持 2D 转换，还支持 3D转换，transform 3D 转换能让网页实现更加酷炫的效果，能够在三维空间中操作元素，跟 2D 转换一样，有平移、旋转、缩放、倾斜 4 种转换方式。今天瑶琴带大家来学习或复习这个知识点。transform 属性有 2D 和 3D 两种转换，本篇介绍 transform 3D转换 的属性。
css3之3D属性
qq_44193048的博客
04-26 391
在之前的一篇文章我只说了2D现在来说说3D。 1.translate 位移 translateX(): 指定X轴的位移; translateY(): 指定Y轴的位移; translateZ(): 指定Z轴的位移; translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;（这里是指3D） <!DOCTYPE ht...
CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）
蟹黄堡
05-16 6237
3D移动translate3d transform: translateX(100px)：仅仅是在X轴上移动 transform: translateY(100px)：仅仅是在Y轴上移动 transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位） transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动 transform: translate3d(x,y,z)：在x，y，z轴上都
2024年 用translate3d 做轮播图
wangiyeng的博客
03-11 588
原理就是用js实现动态改变translate3d(-x00px, 0px, 0px) 这样的语法实现切换。不用任何扩展库，用了css3的 translate3d 发现轮播图只要少许代码就可以实现了，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值