【2D转换：】
        1】位移 translate(x,y)           （百分比单位是相对于自身元素 类似定位，不会影响到其他元素的位置 对行内标签没有效果）
           
        2】旋转 transform:rotate(30deg)   （2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转  正数为顺时针，负数为逆时针）

           转换中心点  transform-origin:top left;


        3】缩放 transform: scale(宽的倍数,高的倍数)


【动画：】 animation
        盒子状态之间的切换，看上去盒子是在动，动画效果。
        1）动画使用步骤
                第1步，定义动画（动画序列，各个状态时--样式）
                      @keyframes move （开始状态0%  ——  结束状态100% ）         
   
                第2步，使用动画   
                   （动画名称 animation-name: move; 持续时间 animation-duration: 2s;）

        2）动画的属性（控制动画执行）
                必须属性：
                        动画名称
                        动画执行时间
                可选属性：
                        速度曲线
                        延迟时间
                        执行次数：无限播放
                        逆向播放：倒车
                        结束状态：一去不复返【注意：这个属性跟无限播放和逆向播放是冲突】
                       
                以上属性都可以简写：
               
                        不包含暂停动画（鼠标悬停在盒子上时hover，设置这个属性）





【1】模拟三角图标
        第1步，使用伪元素添加1个正方形盒子
        第2步，设置盒子的两个边框，并且定到指定位置
        第3步，旋转45度

【2】旋转中心点案例
        结构：大盒子里有一个小盒子，小盒子跟大盒子一样大。
        第1步，小盒子已左下角为中心点，旋转180度
        第2步，大盒子溢出隐藏
        第3步，当鼠标放到大盒子上时，小盒子旋转0度
【3】图片放大案例
        结构：盒子里面有一个图片。
                第1步，鼠标放到图片上，图片放大1.2倍
                第2步，盒子溢出隐藏
                第3步，图片添加过渡
【4】热点城市案例
        结构：
                地图大盒子，大盒子设置地图背景图片。
                        城市盒子，通过定位放到指定的位置。
                                1个小圆点盒子（宽、高、背景色、圆角边框）
                                2-3波纹小盒子（通过定位摞在小圆点的上面，宽、高、圆角边框、盒子阴影）
        动画：
                波纹小盒子放大，每个盒子的动画都延迟执行。
【5】打字机案例
        结构：
                装文字的盒子默认宽度是0，通过动画变宽。
                让文字强制一行显示，并且溢出盒子隐藏。
        动画：
                通过速度曲线：steps()，分为几个步骤（文字个数）去变宽。
               
【6】奔跑的熊大
        结构：
                装熊的盒子（一个熊的大小）
                盒子有背景图（8个不同形态的熊图）
        动画：
                第1个动画熊跑起来：加给div盒子（笼子），使用动画改变背景图的位置（速度曲线为：steps步长）
                第2个动画笼子移动：加给div盒子（笼子），移动的位置，还要一去不复返。

【2D转换：】
        1】位移 translate(x,y)           （百分比单位是相对于自身元素 类似定位，不会影响到其他元素的位置 对行内标签没有效果）
           
        2】旋转 transform:rotate(30deg)   （2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转  正数为顺时针，负数为逆时针）

           转换中心点  transform-origin:top left;


        3】缩放 transform: scale(宽的倍数,高的倍数)


【动画：】 animation
        盒子状态之间的切换，看上去盒子是在动，动画效果。
        1）动画使用步骤
                第1步，定义动画（动画序列，各个状态时--样式）
                      @keyframes move （开始状态0%  ——  结束状态100% ）         
   
                第2步，使用动画   
                   （动画名称 animation-name: move; 持续时间 animation-duration: 2s;）

        2）动画的属性（控制动画执行）
                必须属性：
                        动画名称
                        动画执行时间
                可选属性：
                        速度曲线
                        延迟时间
                        执行次数：无限播放
                        逆向播放：倒车
                        结束状态：一去不复返【注意：这个属性跟无限播放和逆向播放是冲突】
                       
                以上属性都可以简写：
               
                        不包含暂停动画（鼠标悬停在盒子上时hover，设置这个属性）





【1】模拟三角图标
        第1步，使用伪元素添加1个正方形盒子
        第2步，设置盒子的两个边框，并且定到指定位置
        第3步，旋转45度

【2】旋转中心点案例
        结构：大盒子里有一个小盒子，小盒子跟大盒子一样大。
        第1步，小盒子已左下角为中心点，旋转180度
        第2步，大盒子溢出隐藏
        第3步，当鼠标放到大盒子上时，小盒子旋转0度
【3】图片放大案例
        结构：盒子里面有一个图片。
                第1步，鼠标放到图片上，图片放大1.2倍
                第2步，盒子溢出隐藏
                第3步，图片添加过渡
【4】热点城市案例
        结构：
                地图大盒子，大盒子设置地图背景图片。
                        城市盒子，通过定位放到指定的位置。
                                1个小圆点盒子（宽、高、背景色、圆角边框）
                                2-3波纹小盒子（通过定位摞在小圆点的上面，宽、高、圆角边框、盒子阴影）
        动画：
                波纹小盒子放大，每个盒子的动画都延迟执行。
【5】打字机案例
        结构：
                装文字的盒子默认宽度是0，通过动画变宽。
                让文字强制一行显示，并且溢出盒子隐藏。
        动画：
                通过速度曲线：steps()，分为几个步骤（文字个数）去变宽。
               
【6】奔跑的熊大
        结构：
                装熊的盒子（一个熊的大小）
                盒子有背景图（8个不同形态的熊图）
        动画：
                第1个动画熊跑起来：加给div盒子（笼子），使用动画改变背景图的位置（速度曲线为：steps步长）
                第2个动画笼子移动：加给div盒子（笼子），移动的位置，还要一去不复返。