标签：center 旋转 day03 视距 transform perspective H5C3 小结 3D

H5C3-day03-小结

01-认识3D转换

• 3D特点：

  • 近大远小
  • 遮挡物体后面，不可见

• x轴：右正左负

• y轴：下正上负

• z轴：外正内负

02-3D移动translate3d

• 语法

  • transform:translate3d(x,y,z)在x，y，z轴上移动的距离
  • transform:translateX(x);在X轴上移动的距离
  • transform:translateY(y);在Y轴上移动的距离
  • transform:translateZ(z);在Z轴上移动的距离

• 注意：

  • 默认是看不到元素在z轴方向上的移动，要设置视距属性才能看到
  • z轴一般用px、

03-视距 perspective

• 语法
  • perspective: 800px;
• 用来观察3D转换
• 注意
  • 给观察元素的上级盒子设置
  • translateZ(z)和perspective要大于0，否则容易出现兼容问题

04-3D旋转rotate3d

• 语法

  • transform:rotateX(x);沿着x轴旋转
  • transform:rotateY(y);沿着y轴旋转
  • transform:rotateZ(z);沿着z轴旋转
  • transform:rotate3d(x,y,z,deg);沿着自定义轴旋转

• 左手准则

  • 左手拇指指向x轴的正反向
  • 其余手指自然弯曲的反向就是旋转正方向

05-3D呈现transform-style

06-视距原点

• 语法
  • perspective-origin:center center;
  • 默认值是center center，元素的中心点
  • 只指定了第一个参数，第二个参数为默认值center
  • 可以指定百分比，百分比是相对于自身高、宽

07-3D转换总结

• 百分比单位都是相对于本身
• 视距、视距原点、3D呈现都是给父元素添加的

08-旋转木马案例

• 先旋转再移动
• 视距+3D呈现

09-兼容问题处理

• css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做添加对应浏览器前缀。
• 谷歌 -webkit-
• 火狐 -moz-
• IE -ms-
• 注：发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

标签：center,旋转,day03,视距,transform,perspective,H5C3,小结,3D
来源： https://blog.csdn.net/weixin_45555964/article/details/100586915

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