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

空间转换

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

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

空间转换也叫 3D转换

属性：transform

空间位移

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

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值

像素单位数值

百分比

思考：

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

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

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

透视：