过渡、变形、动画

过渡（transition）：哪个元素需要过渡就写在哪个元素上

transition:all 0.3s linear 0;
/*要过渡的属性   过渡执行的时间    运动速度   何时开始*/

2D变形（transform）

注意：组合写法：旋转之后，坐标会跟着旋转

移动：

transform:translate(-50%,-40%);  /*x轴位移-50%  y轴位移-40%*/

transform:translateX(30px);        /*x轴移动30像素*/
transform:translateY(50px);       /*y轴移动50像素*/

缩放：

transform:scale(.1,.2);    /*宽度缩为0.1倍，高度缩为0.2倍*/
transform:scale(2);        /*放大2倍，只有一个值另一个值自动*/

旋转：

transform-origin:top right;    /*设置旋转中心为右上角*/

transform:rotate(50deg);        /*顺时针旋转50度（默认以中心为旋转点）*/

倾斜：

transform:skew(20deg,30deg);    /*x轴倾斜20度，y轴倾斜30度*/

动画（animation）

animation:donghua 0.3s linear 0 infinite alternate forwards;
          /*动画名称 完成时间 运动速度 何时开始 播放次数（默认1次） 是否反方向（否） 保存最后状态（不）*/
          /*donghua  0.3s    匀速    0s后开始 无限循环 正反方向来回 保持   */


/*声明动画*/
@keyframes donghua{
    0%{
      
    }
    50%{
      
    }
    100%{
     
    }
}

3D

transform:rotateX(10deg);
transform:rotateY(10deg);
transform:rotateZ(10deg);

transform:rotete(10deg,20deg,30deg);

transform-style:preserve-3d;        /*3D效果*/