H5C3-day03-小结

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

方法	描述
flat	默认值，平面模式
preserve-3d	三维立体环境

06-视距原点

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

07-3D转换总结

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

08-旋转木马案例

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

09-兼容问题处理

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