css3 动画、变形 、平移

过渡

transition: 要过渡的属性 持续的时间 过渡的运动曲线 延时时间
transition-property: 过渡的属性
transition-duration: 持续的时间
transition-timing-function:linear; 过渡的运动曲线
transition-delay: 延迟时间；

注：过渡只能过渡有具体值得属性。
多属性 ：1. all …
2. 分别写出要过渡的属性以及其他参数 中间以 逗号 隔开。

变形

1.2D 变形 transform : translate (平移) +x 右 +y 下
rotate (旋转) 默认中心旋转点 transfor-origin:;（改变旋转基点）
scale （缩放）
skew （倾斜）

盒子居中第三种：transform:translate(-50%,-50%);
多边形属性：多个属性变形 各属性值空格隔开。
注：多属性变形是，最好先写其他属性在写旋转属性。

<style>
        .box{
            width:300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background-color:teal;
            transition: all 3s  linear;
            
        }
       
        .box:active{
         
           transform: translate(5