CSS深入学习二——3D转换_css translate3d

作者：程序代码艺术家 | 2024-02-05 09:56:43

踩

css translate3d

空间转换

使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间， z轴位置与视线方向相同。

空间转换也叫 3D转换

属性：transform

使用translate实现元素空间位移效果

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值

像素单位数值

百分比

思考：

默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

目标：使用 perspective 属性实现透视效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/60321

推荐阅读

article
translate3d模糊问题(chrome)_transform: translate3d(0, -50%, 0)
,initial-scale=1.... [详细]
赞
踩
article
使用transition、transform: rotate动画导致页面元素模糊闪烁抖动问题_css hover translate3d 效果闪烁
2、添加transform:translate3d(0,0,0);1、添加transform:translateZ()属性。_csshovertranslate3d效果闪烁csshovertranslate3d效果闪烁问题：使用transf... [详细]
赞
踩
article
ios浏览器 图片size过大(长度6000px) 设置translateZ(0)/translate3d(0,0,0)，会模糊
图片尺寸太大[详细]
赞
踩
article
translate3d(0,0,0)_transform:translate3d(0,0,0)
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅https://blog.csdn.net/aaa333qwe/article/details/78155155在使用transform... [详细]
赞
踩
article
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅_transform: translate3d(0, 0, 0);
前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使... [详细]
赞
踩