体会translate3d

马黑黑 · 发表于 2022-5-16 12:45

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

X: 0

Y: 0

Z: 0

马黑黑 · 发表于 2022-5-16 12:46

本帖最后由马黑黑于 2022-5-16 13:07 编辑

translate3d 是 transform 的 3d 转换，它需要三个参数，不能省略。语法如下：
transform: translate3d(tx, ty, tz);

其中，tx 指 X轴坐标位置，可用距离单位或百分比表示，接受正负值，如 200px、80%、-200px 和 -80% 均可；ty 指 Y轴坐标位置，表达方式与 tx 同；tz 指 Z轴坐标位置，仅支持距离单位，不支持百分比。下面语句，第一、二句合法，第三句不合法：

transform: translate3d(200px, -200px, 50px);
transform: translate3d(100%, -90%, 20px);

transform: translate3d(-50%, 50%, 10%);

第三句之所以不合法，是第三个参数即 tz 使用了百分比表示法，这是不允许的。

tz 值的取值范围也颇有讲究，毕竟它不同于 xy。针对屏幕，xy可视为左右和上下的位置，z 则指向屏幕与屏幕前的正前方的方向但不能用确切的距离数据来表示，tz 值的改变在屏幕上的表现似乎是对象的放大缩小而已，但绝非如此，它实际上遵循远小近大的常规原理并以该原则缩放对象。通常，tz 值与景深直接相关，对象的缩放程度与景深的数值成反比。

一楼示范中，小球的初始{xyz}坐标位置为{0,0,0}（当值为0时可以填写距离单位或百分比符号）。改变坐标系的xy值，小球与中心的距离有明显改变，z值实际上也会在xz值的基础上能改变小球的位置（但它真正改变的是距离屏幕前观者眼睛的距离）。