【2D转换：】
        1】位移
        2】旋转
                转换中心点
        3】缩放


【动画：】
        盒子状态之间的切换，看上去盒子是在动，动画效果。
        1）动画使用步骤
                第1步，定义动画（动画序列，各个状态时--样式）
                第2步，使用动画
        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】位移
        2】旋转
                转换中心点
        3】缩放


【动画：】
        盒子状态之间的切换，看上去盒子是在动，动画效果。
        1）动画使用步骤
                第1步，定义动画（动画序列，各个状态时--样式）
                第2步，使用动画
        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盒子（笼子），移动的位置，还要一去不复返。