空间转换-3D-在空间中的位移、旋转、缩放

本文链接：https://blog.csdn.net/m0_73920697/article/details/127402311

本文介绍了3D空间转换中的位移、旋转和缩放概念。在3D空间位移中，涉及X、Y、Z轴的正负方向；通过CSS的transform属性实现位移，如translateX、translateY、translateZ，并利用perspective属性呈现Z轴效果。空间旋转使用rotate，遵循左手法则确定轴向。缩放利用scale3d或scaleX、scaleY、scaleZ，值范围从0到1表示缩小，等于1保持原样，大于1则放大。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲来无事来整理一下关于3D空间转换的位移，旋转，缩放。

3D空间位移

1、空间位移是指分别在X轴，Y轴、Z轴进行位移。
如果看成一个坐标系的话也是由位移的正负的
X轴:右移动为正方向
Y轴:下移动为正方向
Z轴：向外移动正方向。（Z轴位置与我们视线方向相同）
附图
在这里插入图片描述
2、
属性：transfrom
取值：translate（X,Y,Z`）

像素单位数值--translateX(50px) translateY(100px) translateZ(150px) 
百分比--transfrom：translate（50%，100%，150%``）
1-基本常用使用：transfrom：translate（50px，100px，150px``）
2-translateX(50px)
 translateY(100px) 
 translateZ(150px)

2.1 复合属性
属性：transform
取值：translateX(50px) translateY(100px) translateZ(150px)
注意：
1、在我们使用以上代码进行位移运行时，Z轴的移动是看不到的，因为我们的电脑屏幕是2D的所以没法显示出来，这时候我们为了看清楚效果，我们会给父级元素添加一个属性perspective:(取值在-800px~1000px）之间，这样我们就能看清楚Z轴的位移变化，近大远小。
近大：例如：translate（150px）时候，我们就能看到图片变大了，向我们靠近。同理可证远小亦然。
2、`perspective:(取值在800px~1000px）是指视距===人眼到屏幕的距离，在这个范围内人们看到的物体变化最好看-------如果你非要问为什么，我只能告诉你，是实验出来的，并且老祖宗说的。

空间旋转

属性：transfrom
取值：rotate(360deg)

1、`  div {
   
            /* 空间旋转 */
            transform: rotate3d(20deg, 3