css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例

 空间转换

空间:是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按,z轴位置与视线方向相同。

css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例_第1张图片

  • 属性:transform

        transform:translate3d(x,y,z);

        transform:translatex();

        transform:translatey();

        transform:translatez();

  • 取值(正负均可)

        像素单位数值deg

        百分比(参照盒子自身尺寸计算结果)

注意:电脑是平面,默认无法观察z轴平移效果

3d小括号里面必须用逗号隔开三个数

视距perspective

作用:指定观察者与z=0平面的距离,为元素添加透视效果

<

你可能感兴趣的:(HTML和CSS学习,css,前端,html,css3,学习)