Bootstrap

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

空间转换

使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果
空间:是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间, z轴位置与视线方向相同。
空间转换也叫 3D转换
属性:transform

空间位移

使用translate实现元素空间位移效果
语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值
像素单位数值
百分比
思考:
默认情况下,为什么无法观察到Z轴位移效果?
答:Z轴是视线方向,移动效果应该是距离的远或近,电脑屏幕是平面,默认无法观察远近效果
目标:使用 perspective 属性实现 透视 效果

透视:

;