标签：第二十三 效果 透视 transform 空间 位移 属性

空间转换

目标:使用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

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

   

• 作用

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

标签：第二十三,效果,透视,transform,空间,位移,属性
来源： https://www.cnblogs.com/cm666/p/16197472.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。