简单理解XYZ三轴

马黑黑

轴对于运动对象而言，是容易理解的。例如：

李宁在单杠上转圈圈，单杠是水平方向的，李宁是在单杠上围绕着X轴做运动，用 rotateX 表示；

镁铝跳钢管舞，钢管是竖着的，它是Y轴，女郎绕着钢管旋转时，她做的运动是围绕着Y轴的。我也想学学这样做 rotateY 运动；

军训打靶，子弹射向目标，于你而言，子弹是在沿着Z轴运动，远你而去；假如靶场那里有人向你射出一颗子弹，这颗子弹对你而言，也是沿着Z轴做前进运动，近你而来，危险的translateZ！

三轴需要参照，在web平面，观察者以自身为参照。我们眼前的物体，例如蜘蛛，它左右来回走，做的是沿X轴的translateX运动；小球上上下下，自然是沿Y轴做translateY行进；光柱从远处射向我们，不论是否倾斜，它做的运动是自远而近的，是基于Z轴的，也许有rotateZ，也是有skewZ，可能也少不了translateZ。

物体的运动可能存在基于单一轴的运动现象，但更多的是基于多轴的。正因为多轴的存在，物体的运动才不会像时钟指针的运动那样单调，否则，赛车没有看头，服装表演会索然无味，足球也不单单是中国队不争气的问题。

生活中我们所做的任何动作，对特定观察者来说，这一系列的动作里头，都包含有基于三轴的运动。梳头时，你看到镜子里丈夫从你的背后走来，这一动作是基于Z轴的，然后他在背后俯下身子要亲吻你，这一上身动作是基于X轴的，接着他抱起你转了几个浪漫的圈圈，这是基于Y轴的。镜子把这一切都看的真切，你俩忽上忽下，忽左忽右，忽前忽后，这些动作几乎同时围绕着xyz三轴发生，如果存在xyz轴体系，它会不停地变换着中心，但可能存在一个可计算的基点，也就是运动的圆心。

物体在自然空间中的运动却不同于二维的显示平面，或者可以反过来说，二维空间创造不出真实的自然三维场景和场景中的动作。所以要虚拟，立体电影所使用的眼镜和VR类的设备应运而生，用欺骗的方式（其实是算法的应用）让我们感觉到那是立体的世界。但我们不可能老戴着这类设备上网，因此web创建了一套裸眼3的的标准，用以模拟3d场景与3d动作，CSS里的rotateX/Y/Z等内置函数或方法属性就是用来实现这些愿景的。

屏幕之上，左右方向的是X轴，上下方向的是Y轴。Z轴则需要3d渲染环境+景深来营造，一般来说，物体变小的表示正前方向远离屏幕跟前的你，元素变大的表示向你靠近；但你远离屏幕或靠近屏幕，屏幕上的具体对象不会产生内质的什么变化，Z轴不是基于你离屏幕的远近来模拟，而是通过屏幕里的对象及其动作属性。

理解了三轴的原理，就可以使用CSS的内置函数、方法与属性，来创建贴切主体的2d与3d的精彩。

加林森

来学习

红影

有趣有趣，这样理解三轴特别清晰呢。黑黑的语言风格一如既往地幽默，很赞

红影

2d的时候也可以设置z轴来更换叠放次序呢。

执著

学习了一下，大概理解，正好昨天遇到z-index: 1;、z-index: 2;

马黑黑

执著 发表于 2024-3-22 20:42
学习了一下，大概理解，正好昨天遇到z-index: 1;、z-index: 2;

这是元素层级属性。页面上的元素，可以是彼此相连的，也可是是相互重叠的。当一些元素因为需要重叠在一起，元素的 z-index 的赋值越高，它就会在越上层，从而保证不会被覆盖以致于看不见。层级只有在彼此重叠的元素中有意义，同时，重叠的元素中，z-index 要能发挥作用，需要元素具备 position 属性值，否则 z-index 的设置极可能会失效。

执著

马黑黑 发表于 2024-3-22 20:50
这是元素层级属性。页面上的元素，可以是彼此相连的，也可是是相互重叠的。当一些元素因为需要重叠在一起 ...

说到这里，我有一个疑问：有些帖子中有mp4激光效果图，但它们不是像透明的gif，那为什么没有完全遮盖背景图片呢？和这个设置有关吗》，比如：“轻涟”： http://mhh.52qingyin.cn/art/bsho ... rt=mahei_1702818890

马黑黑

执著 发表于 2024-3-22 23:03
说到这里，我有一个疑问：有些帖子中有mp4激光效果图，但它们不是像透明的gif，那为什么没有完全遮盖背景 ...

这个，视频的CSS设置是酱紫：

#vid {
        position: absolute;
        width: 1024px;
        height: 740px;
        top:-100px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
}


红色这句，使用了元素的混合技术，不同的混合子滤镜，得到的融合效果不同。

执著

马黑黑 发表于 2024-3-22 23:43
这个，视频的CSS设置是酱紫：

#vid {

谢谢老师！我到时再琢磨琢磨，晚安！

马黑黑

执著 发表于 2024-3-23 00:26
谢谢老师！我到时再琢磨琢磨，晚安！

做帖子实际上需要相对复杂的知识体系打底，需要慢慢领悟和积累各个知识细节，还有创作经验