2D转换：
        1，给元素添加转换属性transform。
        2，属性值为translate（x，y）如transform：translate（50px，50px，）

        总结：
          1,translate中的百分比单位是相对于自身元素的translate：（50%，50%）
           2，translate类似定位，不会影响到其他元素的位置。
           3，对行内标签没有效果。      

           旋转rotate：
        1，旋转指的是让元素在2维平面顺时针旋转或者逆时针旋转。
       
        使用步骤：
        属性值为rotate（度数）如transform：rorare（30deg）顺时针方向旋转30度 正数顺时针，负数为逆时针。



            动画animation：
        1，@keyframes move{
        开始状态
        0%{
        transform：translateX（0px）
}
        结束状态
        100%{
        transform：translateX（1000px）
}
}
    div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用（使用）动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

         
          2D转换：
        1，给元素添加转换属性transform。
        2，属性值为translate（x，y）如transform：translate（50px，50px，）

        总结：
          1,translate中的百分比单位是相对于自身元素的translate：（50%，50%）
           2，translate类似定位，不会影响到其他元素的位置。
           3，对行内标签没有效果。      

           旋转rotate：
        1，旋转指的是让元素在2维平面顺时针旋转或者逆时针旋转。
       
        使用步骤：
        属性值为rotate（度数）如transform：rorare（30deg）顺时针方向旋转30度 正数顺时针，负数为逆时针。



            动画animation：
        1，@keyframes move{
        开始状态
        0%{
        transform：translateX（0px）
}
        结束状态
        100%{
        transform：translateX（1000px）
}
}
    div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用（使用）动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }