空间转换

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

• 空间:是从坐标轴角度定义的.x,y,z三条坐标轴构成了一个立体空间,z轴是视线方向

• 空间转换也叫3D转换

• 属性:transform

空间位移

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

• 语法

  transform:translate3d(x,y,z);
  transform:translateX(值);
  transform:translateY(值);
  transform:translateZ(值);

• 取值

  • 正负均可

  • 像素单位数值

  • 百分比

透视

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

生活中,同一物体,观察距离不同,视觉上有什么区别?

• 近大远小,近清楚远模糊

默认情况下,为什么无法观察到Z轴默认效果?

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

• 属性(添加给父级)

  • perspective:值

  • 取值:像素单位数值,数值一半在800-1200

  • 透视距离也称视距,所谓视距就是人的眼睛到屏幕的距离.

   

• 作用

  • 空间转换时,为元素添加近大远小,近实远虚的视觉效果