css中的2d 动画 3d方法

transform 2d/3d 语法入口(转化)

• 移动 translate 可以改变元素在页面中的位置，类似定位；

代码连写

• transform translate(100px),(100px) 括号里第一个是X轴,第二个是Y轴或者在后面加%

旋转

• rotate
  transform:rotate(45deg); 单位是deg(度), 正值顺时针. 关键词绕着

缩放

• scale
  transform:scale(2,3) 使用场景: 鼠标悬浮,按钮放大 后面参数为倍数(无单位) 会受中心点的影响下面的子元素、文字、属性会被缩放； 中心点的代码:transform-origin 默认旋转的基准点是中心点

2D综合写法:

• 移动在旋转前面 transform: translate(x,y) rotate(90deg) scale(x,y); 旋转在前面:transform:rotate(90deg) translate(x,y) scale(x,y)
  使用顺序不同，出现的效果不同，因为旋转会改变初始轴向，再次移动就会按照改变后的轴向进行移动；

animation
@keyframs donghua {
          // 开始状态
    from {
        transform: translateX(0px);
       background-color:red;
    }
       //   结束状态
    to {
                 transform:translateX(1000px)
     background-color:yellow;

   }
}
    div {
      //  调用
      animation-name:donghua;
      // duration 持续时间
    animation-duration: 3s;
    
}
@keyframs donghua {
    0% {
   }
             50% {
   }
             // 结束状态
    100%{
   }

}

 /* 匀速  */
    animation-timing-function: linear;
    /* 慢-快-慢  默认值  */
    animation-timing-function: ease;
    /* 慢-快  */
    animation-timing-function: ease-in;
    /* 快-慢  */
    animation-timing-function: ease-out;
    /* 慢-快-慢  */
animation-timing-function: ease-in-out;

animation-timing-function：steps(n)  分步 实现 老电影一帧一帧，整个动画分为几步骤完成

动画简写：动画名称 持续时间 速度曲线 等待时间 执行次数 执行的方向 动画等待或结束的状态

animation: name duration(动画完成一个周期所花费的时间) timing-function(速度曲线) delay(动画何时开始) iteration-count(动画播放的次数) direction(是否在下一期逆向播放) fill-mode(结束后的状态)

3d更2d比多出一个z轴面对我们的方向 写在一起：tansform: translateX(100px) translateY(100px) translateZ(100px) 三个方向同时写：transform: translate3d(100px,100px,100px);

• XY 方向可以设置px值和%（因为有宽高）；
• Z 轴只能设置 px，不能设置%（原因是盒子没有厚度）；
  子元素做3D转换，需在其父级上加transform-style属性，这样子元素做的3D转化才能为观测到；

• transform-style: preserve-3d;
• 视距 perspective保证盒子的移动能被观测到近大远小的效果；产生透视感 perspective: 1000px;