空间转换
使用
transform
属性实现元素在空间内的位移、旋转、缩放等效果
空间:是从坐标轴角度定义的。
x 、y 和z
三条坐标轴构成了一个立体空间,
z轴位置与视线方向相同。
空间转换也叫
3D转换
属性:transform
空间位移
使用translate实现元素空间位移效果
语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值
像素单位数值
百分比
思考:
默认情况下,为什么无法观察到Z轴位移效果?
答:Z轴是视线方向,移动效果应该是距离的远或近,电脑屏幕是平面,默认无法观察远近效果
目标:使用
perspective
属性实现
透视
效果