移动端web开发第二天

3D转换

1、空间位移

• 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

• 属性：transform

  
  
  
  

  x轴：水平向右 注意： x 右边是正值，左边是负值
  y轴：垂直向下 注意： y 下面是正值，上面是负值
  z轴：垂直屏幕 注意： 往外面是正值，往里面是负值

• 语法：transform: translate3d(x, y, z);
  transform: translateX(值);
  l transform: translateY(值);
  l transform: translateZ(值);

• 取值（正负均可）
  像素单位数值
  百分比

2、透视

透视：在2D平面产生近大远小视觉立体，但是只是效果二维的

• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素（px)
  d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
  z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大
  属性（添加给父级）
• perspective: 值;
• 取值：像素单位数值， 数值一般在800 – 1200。
  作用：
  空间转换时，为元素添加近大远小、近实远虚的视觉效果
  有了透视，就能看到translateZ 引起的变化了
• translateZ：近大远小
• translateZ：往外是正值
• translateZ：往里是负值

3、旋转（rotate）

3D旋转：3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转
语法：transform: rotate3d(x,y,z,deg)
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手准则

3、立体呈现

• 控制子元素是否开启三维立体环境
• ransform-style: flat 子元素不开启3d立体空间 默认的
• transform-style: preserve-3d子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

4、空间缩放

作用：使用scale实现空间缩放效果
语法：

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);

动画（animation）

动画：可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
实现动画步骤
1、定义动画

2、使用动画

动画属性

运动曲线
animation-timing-function：规定动画的速度曲线，默认是“ease”

注意：
补间动画：动画执行过程中，没有间隔，非常的平滑
使用的速度曲线：默认值为ease； linear匀速的
逐帧动画：一步一步去执行的动画，中间会有间隔
使用的速度曲线：steps(正整数)
逐帧动画又叫精灵动画，逐帧动画常常配合精灵图去使用