2D 3D转化和动画

day 9.10   2D、3D转化和动画  
一、2D转化
属性：transform：translate（）/scale（）/rotate（）/skew（）/

1）取值：translate（x水平方向，y垂直方向）平移  将元素按指定的方向平移移动,相当于定位中的relative。（可以为负值，也可以是百分比）
    translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
      translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
      这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以，
       transform:translate(-100px,0)实际上等于transform:translateX(-100px);
      transform:translate(0,-100px)实际上等于transform:translateY(-100px)。
2）取值：scale（）缩放（没有单位，可设置一个值）让元素根据中心原点对对象进行缩放。默认值为1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
        scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
        scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
3）取值：rotate（水平  180deg，垂直 180deg）（可设置一个值，表示水平垂直旋转 ） 
                 在平面里面旋转
                transform: rotateX(60deg) 绕着x轴旋转
                 transform: rotateY(60deg) 绕着y轴旋转
       默认是根据中心原点旋转的。注意（transform-origin改变旋转元素的旋转基点。取值：left top 左上角；left bottom 左下脚；left 左边的中间；right top 右上角；right 右边的中间；right bottom  右下角）
4）取值；skew（xdeg，ydeg） 翻转，扭曲；
此知识点坐标轴有改变，垂直的是X轴，水平的是Y轴。
transform：skew（xdeg，ydeg）；
transform：skewX（）；
transform：skewY（）；
如果ydeg值为正数时，顺时针旋转，负值就是逆时针旋转。
如果xdeg的值为正数的时候，逆时针旋转，负数就是顺时针旋转
二、3D转换transform
1）3D移动：translate3d() 
注意：在显示3D时，必须要给父元素添上这两个属性，不然看不到3D的效果  transform-style：preserve-3d；
perspective：value（随便取值，离看屏幕的距离，不能小于父元素的大小）
作用：使元素在这三个纬度中移动。
语法：
（1）translate3d(x,y,z) 
（2）translateX(x),translateY(y),translateZ(z)
2）3D缩放：scale3d()
作用：使元素在这三个纬度中缩放。
语法：
（1）scale3d(x,y,z) 
（2）scaleX(x),scaleY(y),scaleZ(z)（）z轴看不出什么效果
3）3.3D旋转:rotate3d()
作用：使元素在这三个纬度中旋转。
语法：
（1）rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴transform：rotate3d（1，1，0，45deg）；X轴和Y轴方向同时进行旋转
4）元素的基点位置，也就是观察位置。
perspective-origin: (left/center/right/value    top/center/bottom/value)
perspective-origin: left -300px;
（2）rotateX(angle)，rotateY(angle) ，rotateZ(angle)
三、动画（重要）
 1、创建动画
  @keyframes move {
            0% {}
            100% {
                transform: translateX(700px);
            }
   2、使用动画 animation
   animation的取值：
   1）动画名称   animation-name: move（可随便取）;
   2）动画所需要时间  animation-duration: 2s;
   3）延迟几秒开始运动  animation-delay: 1s;
   4）运动效果  animation-timing-function: ease;
   5）规定动画的次数 animation-iteration-count: 2;     (1)infinite 循环播放（2）value(数字)
   6）规定是否轮流反向播放动画   animation-direction: alternate-reverse; 1）reverse 反向播放（2）alternate 动画在奇数次的时候正向播放，在偶数次的时候反向播放，（3）alternate-reverse动画在奇数次的时候反向播放，在偶数次的时候正向播放（4）normal默认值，动画按正常播放
   7）动画完成时，要应用的样式  animation-fill-mode: both;  (1)forwards  动画完成时，停留在最后位置
   8）让动画停止   animation-play-state: paused
总写：animation: name duration timing-function delay iteration-count direction fill-mode;
 四、补充
  1、旋转之后，在移动会有问题，如果出现需要移动又有旋转的时候，要先移动在旋转。
  2、transition 和 animation的区别
        相同点&#x