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

最新推荐文章于 2024-10-08 18:21:13 发布
最新推荐文章于 2024-10-08 18:21:13 发布
阅读量2.4k 收藏 1
点赞数 1

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

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


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

melody_day
关注
CSS函数: translate、translate3d的使用
胖蔡叨叨叨
06-05 1048
和函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。
3D移动 translate3d
m0_49471668的博客
06-27 695
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分别指要移动的
C3的translate3d代替js动画
前端一线搬运工的博客
02-15 1555
Css3的translate3d会触发GPU,动画效果流畅不卡顿;而JS动画在数据量大的时候容易卡顿; 详细移步: -webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅...
CSS 3D转换
最新发布
2401_82561004的博客
10-08 1372
在 CSS 中，除了可以对页面中的元素进行外，您也可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。
CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
m0_61547956的博客
04-08 7856
1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。 根据近大远小，物体遮挡后面看不见的原理。 透视写在被观察元素的父盒子上，透视越小
【CSS】3D转换
m0_62827829的博客
10-13 142
【CSS】3D转换
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 5381
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轴：水平向右 注意
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
通过将3D对象映射到2D的CSS3元素上，我们可以用CSS3的translate3d()、rotate3d()等方法来处理3D变换，从而在网页上创建出逼真的三维视觉效果。 要使用 CSS3DRenderer 渲染全景图，我们需要遵循以下步骤： 1. **...
CSS3 translate实现轮播图丝滑般翻页，setInterval实现定时器等常见操作。
08-13
总的来说，CSS3的`translate`属性和JavaScript的`setInterval`函数结合使用，能够帮助开发者创建出高性能、用户体验良好的轮播图组件。这种技术不仅适用于电商网站，还可以广泛应用于各种需要动态展示内容的网页设计...
CSS动画 3D反转Tab
01-29
在网页设计领域，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、MathML等）文档呈现方式的样式表语言。本主题聚焦于"CSS动画 3D反转...同时，要注意性能优化，避免过度使用3D转换导致的性能问题。
CSS3实现3D翻书效果
09-24
6. JavaScript交互：虽然主要使用CSS3来实现视觉上的3D效果，但要让翻书效果与用户的点击事件相结合，还需要编写JavaScript代码来监听用户的点击行为，并触发对应的CSS动画。文中提到了原生JavaScript的使用方法，也...
js+css3实现3D骰子特效.rar_JS3d滚动_js+css3实现3D骰子特效_骰子
09-24
在3D骰子效果中，适当的透视值可以增强3D视觉效果。 4. **CSS3动画（Animations）**： CSS3动画通过`@keyframes`规则定义元素从一种样式到另一种样式的过渡。在骰子特效中，可能通过动画控制骰子旋转的速度和方向...
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
32.三维转换属性
potato123232的博客
04-07 1447
三维在网页中显示出来有两个特点 近大远小 被遮挡后不可见 三维转换有四个常用属性，3D位移(translate3d)，3D旋转(rotate3d)，透视(perspective)，3D呈现(transfrom-style) 与二维转换相同，由于转换的属性名都为transform，所以无论写多少transform只有最后的语句生效，写一个二维的再写一个三维的，也是只有最后的语句生效 目录 1三维坐标系 2透视 perspective 3三维移动 translate3d 4三维旋........
CSS基础：新属性3D的转换，以及案例演示
u011863822的博客
03-23 1912
CSS3新特性之3D转换，以及透视，3D呈现 transfrom-style
2024年 用translate3d 做轮播图
wangiyeng的博客
03-11 419
原理就是用js实现动态改变translate3d(-x00px, 0px, 0px) 这样的语法实现切换。不用任何扩展库，用了css3的 translate3d 发现轮播图只要少许代码就可以实现了，
还不知道transform 3D转换怎么用？看这个就够了
欢迎访问我的主页：https://www.bookbook.cc
03-21 9263
还不知道transform 3D转换怎么用？看这个就够了
3. （css3）3D转换快速上手
xiao廸要飞
01-11 357
文章目录1. 重点提炼2. `3D` 转换3. `3D` 移动 `translate3d`4. 透视 `perspective`5. `translateZ`6. `3D` 旋转`rotateX`7. `3D` 旋转 `rotateY`8. `3D` 旋转 `rotateZ`9. `rotate3d`10. `3D` 呈现 `transform-style`11. example01-案例：两面翻转的盒子12. example02-案例：3d导航栏13. example03-案例：旋转木马14.
关于left,top和translate2d以及translate3d性能问题的详讲
南宫的CG世界
05-30 1433
left和top的性能高还是translate2d的性能高？听说translate3d的性能最高？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值